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一 个 大 叔 码 农 的 Angular 2 创世纪 
作为 一 个 出 生 于 20 世 纪 70 年 代 的 大 叔 ， 我 在 软件 这 个 领域 已 经 摸 肘 滚 打 了 16 年 ， 从 程序 员 、 项 目 经 理 、 产 品 经 理 ， 项 目 总 监 ， 到 部 门 管理 等 各 个 角色 都 体验 过 ， 深 深 地 了 解 到 这 个 行业 发 展 的 速度 之 快 


是 其 他 行业 无 法 比拟 的 : 从 编程 语言 、 各 种 平台 、 各 种 框架 、 设 计 模式 到 各 类 开源 工具 、 组 件 林林总总 ， 要 学 习 的 东西 实在 太 多 ， 因 为 变化 太 快 。 


但 万 变 不 离 其 宗 ， 名 词 变 化 虽 多 ， 透 射 的 本 质 其 实 是 趋同 的 : 那 就 是 程序 员 受 不 了 代码 的 折磨 ， 干 方 百 计 地 想 让 这 个 工作 更 简单 ， 更 能 应 对 变化 。 比 如 说 ， 面 向 对 象 编程 (Object-Oriented 
Programming) 理念 的 提出 其 实 是 牺 牧 了 部 分 性 能 换 来 代码 层次 结构 的 清晰 ， 因 此 也 众生 了 C++、Java、C# 等 一 系列 优秀 的 面向 对 象 编程 语言 ;后 来 程序 员 们 发 现在 实际 的 编程 逻辑 中 ， 往 往 不 是 像 对 象 
树 那样 可 以 划分 得 那么 清楚 。 还 有 一 些 类 似 安全 、 日 志 等 功能 其 实 是 撒 在 系统 各 个 角落 的 ， 于 是 ， 面 向 切面 的 编程 (Aspect-Oriented Programming) 应 运 而 生 。 再 后 来 一 部 分 科学 家 发 现 现 有 的 编程 语 
言 做 分 析 或 数据 计算 实在 太 麻 烦 ， 明 明 要 计算 的 逻辑 很 清晰 ， 却 要 用 一 大 堆 的 对 象 封 半 赋值， 函数 式 编 程 (Functional Programming) 便 出 现 了 。 最 近 几 年 被 产品 经 理 逼 疯 的 程序 员 认为 强 类 型 语言 改动 
起 来 太 慢 太 繁琐 ， 于 是 动态 脚本 类 语言 大 行 其 道 。 


仔细 分 析 一 下 ， 这 些 语 言 不 是 互 斥 的 ， 其 实 好 的 元 素 都 是 会 被 慢 慢 吸 收 到 各 自 的 语言 、 平 台 上 面 去 的 。 比 如 C#、Java 也 采纳 了 函数 式 编 程 的 一 些 特点 ， 像 Lamda 表 达 式 ;再 比如 .NET 和 Java 平 台 基 础 
上 也 拥有 动态 脚本 语言 ， 像 .NET 平 台 上 的 IronRuby，Java 平 台 上 的 Scala 等 。 本 书写 的 Angular 2 就 是 在 Javascript 这 种 脚本 语言 基础 上 引入 了 Typescript， 进 而 可 以 兼 具 面向 对 象 编程 和 强 类 型 语言 的 优 
点 ; 引入 了 依赖 性 注入 (Dependency Injection) 这 种 在 强 类 型 语言 中 被 证 明 非 常 有 用 的 设计 模式 ， 通 过 引入 Rx， 让 Javascript 拥 有 了 函数 式 编程 的 能 力 。 


写 这 本 书 的 起 因 很 偶然 。 我 们 团队 以 Android 和 iOs 开 发 人 员 为 主 ， 前 端 开发 人 员 只 有 一 个 。 但 在 开发 过 程 中 我 们 体会 到 原生 App 的 开发 进 代 速 度 比较 慢 ， 因 此 希望 以 前 端 开发 快速 和 迭代， 逻辑 和 界面 摸 
清楚 后 再 进行 App 开 发 。 我 们 决定 走 前 端 路 线 后 ， 就 开始 挑选 前 端 框架 ，React、Vue 和 Angular 2 我 们 都 尝试 了 ， 最 终 选 择 Angular 2 是 因为 谷歌 在 Angular 2 中 把 多 年 Android 开 发 积累 的 优秀 思想 带 入 了 
Angular， 使 得 Angular 的 开发 模式 太 像 App 开 有 友 了 。 有 App 开 发 经 验 或 者 Java、.NET 开 发 经 验 的 人 可 以 非常 舒服 地 切入 进去 。 有 了 选择 ， 我 就 开始 边 学 习 边 给 开发 小 伙伴 做 培训 ， 培 训 资料 也 就 当成 网 文 发 
表 出 来 。 没 想到 在 网 上 得 到 很 多 网 友 的 支持 和 鼓励 ， 觉 得 我 边 学 边 写 时 对 一 些 问 题 的 思考 过 程 和 改进 过 程 对 大 家 的 学 习 也 很 有 帮助 。 而 我 也 在 与 大 家 的 互动 和 分 享 中 纠正 了 对 一 些 概念 和 模式 的 认识 。 互 动 
和 分 享 是 最 好 的 学 习 方式 ， 这 也 是 本 书 区 别 于 其 他 “专门 教程 ”的 重要 一 点 ， 我 们 是 一 起 在 学 习 ， 一 起 在 思考 的 。 特 别 感谢 简 书 和 掘 金 等 平台 的 读者 ， 帮 有 我 纠正 了 很 多 错误 认识 和 笔 误 等 。 机 械 工 业 出 版 社 
的 吴 怡 编辑 也 正 是 在 网 上 看 到 我 的 文章 后 ， 鼓 励 我 结集 出 书 ， 给 我 提 了 很 多 中 肯 意 见 ， 最 终 才 有 此 书 ， 非 常 感谢 。 


本 书 分 为 9 章 ， 第 1 ~ 7 章 中 我 们 从 无 到 有 地 搭建 了 一 个 待 办 事项 应 用 ， 但 是 我 们 增加 了 一 些 需求 : 多 用 户 和 HTTP 后 台 。 这 样 待 办 事项 这 个 应 用 就 变 得 及 人 雀 虽 小 五 脏 俱全 。 通 过 这 样 一 个 应 用 的 开发 ， 我 
们 熟悉 了 大 部 分 重要 的 Angular 2 概念 和 实践 操作 。 建 议 读者 按 顺 序 阅读 和 实践 。 阅 读 完 第 7 章 ， 基 本 可 以 在 正式 的 开发 工作 中 上 手 了 。 第 8 章 介 绍 了 响应 式 编程 的 概念 和 Rx 在 Angular 中 的 应 用 ， 可 以 说 ， 如 
果 不 使 用 Rx，Angular 2 的 威力 就 折 半 了 ， 很 多 原来 需要 复杂 逻辑 处 理 的 地 方 用 Rx 解 决 起 来 非常 方便 。 由 于 Rx 本 身 的 学 习 曲 线 较 陡 ， 我 们 伦 了 很 大 篇 幅 做 细致 的 讲解 。 第 9 章 是 在 第 8 章 基础 之 上 ， 引 入 了 在 
React 中 非常 流行 的 Redux 状 态 管理 机 制 ， 这 种 机 制 的 引入 可 以 让 代码 和 逮 辑 隔离 得 更 好 ， 在 团队 工作 中 强烈 建议 采用 这 种 方案 。 第 8 章 和 第 9 章 由 于 学 习 门槛 较 高 ， 有 的 读者 可 能 暂时 接受 起 来 有 困难 ， 遇 
到 这 种 情况 可 以 先 放 下 ， 等 到 使 用 Angular 一 段 时 间 后 再 回头 来 看 。 


大 家 在 阅读 过 程 中 可 能 会 发 现 从 第 3 章 开 始 起 ， 我 们 在 不 断 地 打磨 待 办 事项 这 个 应 用 的 逻辑 ， 持 续 地 优化 。 我 写 这 本 书 其 实 不 仅 是 为 了 让 大 家 入 i 门 Angular (类 似 的 书 太 多 了 ， 不 需要 我 再 写 一 本 ) ， 更 
多 的 是 想 把 自己 琢磨 这 些 问 题 、 解 决 这 些 问 题 的 过 程 和 逻辑 与 大 家 分 享 ， 把 一 些 好 的 设计 模式 和 思想 介绍 给 大 家 ， 这 些 模式 和 思想 远 比 一 个 框架 更 有 生命 


本 书 适 合 有 面向 对 象 编程 基础 的 、 掌 握 一 门 现代 编程 语言 的 读者 阅读 。 如 果 有 Java、(C#、Objective-C 等 强 类 型 语言 背景 ， 对 于 本 书 中 介绍 的 Angular 各 种 元 数据 修饰 符 接受 程度 会 很 高 ， 对 于 
Typescript 的 类 型 等 也 会 一 点 就 透 。 如 果 有 Javascript 背 景 ， 理 解 TypeSscript 语 法 是 无 障碍 的 ， 但 强 类 型 的 约束 和 修饰 符 等 概念 需要 仔细 体会 。 如 果 使 用 过 Spring Framework 或 者 Dagger2 等 loC 框 架 ， 那 
么 对 依赖 性 注入 的 概念 就 再 熟悉 不 过 了 。 


建议 学 习 的 同时 或 之 后 可 以 比较 一 些 其 他 主流 前 端 框架 ， 比 如 React 或 Vue， 参 照 后 你 会 发 现 很 多 功能 其 实 异 曲 同 工 。 在 读本 书 的 过 程 中 如 果 发 现 有 错误 ,希望 你 可 以 在 书籍 源码 的 Github 地 址 
(https://github.com/wpcfan/awesome-tutorials) 上 提问 题 ， 我 们 一 起 打造 一 本 一 直 在 生长 的 书 。 希 望 年 轻 的 你 和 大 叔 的 我 一 起 学 习 ， 一 起 面 对 这 个 迅速 成 长 的 行业 ! 


王 其 


2017 年 2 月 11 日 


1.2 环境 配置 要 来 


Angular 2 需要 node.js 和 npm， 我 们 下 面 的 例子 需要 node.js 6.x.x 和 npm 3.x.x， 请 使 用 node-v 和 npm-v 来 检查 ，Mac 下 建议 采用 brew 安 装 node。 由 于 众所周知 的 原因 ，http://npmjs.org 的 站 点 访 
问 经 常 不 是 很 顺畅 ， 这 里 给 出 一 个 由 淘宝 团队 维护 的 国内 镜像 http://npm.taobao.org/。 安 装 好 node 后 ， 请 输入 npm config set registry https://registry.npm.taobao.org 来 改变 默认 的 npm 查 找 包 的 站 
点 ， 加 快 访问 和 下 载 速度 。Mac 和 Linux 环 境 可 能 需要 在 我 们 提 到 的 命令 前 加 sudo。 


和 官方 快速 起 步 文档 给 出 的 例子 不 同 ， 我 们 下 面 要 使 用 Angular 团 队 目 前 正在 开发 中 的 一 个 工具 Angular CLI。 这 是 一 个 类 似 于 React CLI 和 Ember CLI 的 命令 行 工具 ， 用 于 快速 构建 Angular 2 的 应 用 。 
它 的 优点 是 进一步 屏 菩 了 很 多 配置 的 步骤 ， 自 动 按 官方 推荐 的 模式 进行 代码 组 织 ， 自 动 生成 组 件 /服务 等 模板 以 及 更 方便 地 发 布 和 测试 代码 。 由 于 目前 这 个 工具 还 在 beta 阶 段 ， 安 装 时 请 使 用 npm install-g 


angular-cli@latest 命 令 。 


1DE 的 选择 也 比较 多 ， 免 费 的 有 Visual Studio Code 和 Atom， 收 费 的 有 WebStorm。 我 们 这 里 推荐 采用 Visual Studio Code， 可 以 到 https://code.visualstudio.com/ 下 载 Windows/Linux/MacOS 版 
本 。 需 要 注意 这 个 可 不 是 Visual Studio， 不 是 那个 庞大 的 IDE， 别 下 载 错 了 。 


安装 完 以 上 这 些 工具 ， 开 发 环境 就 部 署 好 了 ， 下 面 我 们 将 开始 Angular 2 的 探险 之 旅 。 


1.3 ”第 一 个 小 应 用 Hello Angular 


那么 现在 开启 一 个 terminal (命令 行 窗口 ) ， 键 入 ng new hello-angular， 你 会 看 到 以 下 的 命令 行 输出 。 


wangpengdeMacBook-Pro:~ wangpeng$ ng new hello-angular 
installing ng2 
create .editorconfig 
create README.md 
create src/app/app.component.css 
create src/app/app.component.html 
create src/app/app.component.spec.ts 


create src/app/app.component.ts 
create src/app/app.module.ts 
create src/app/index.ts 
create src/assets/.gitkeep 

create src/environments/environment.prod.ts 


create src/environments/environment.ts 
create src/favicon.ico 
create src/index.html 
create src/main.ts 
create src/polyfills.ts 
create src/styles.css 
create src/test.ts 
create src/tsconfig.json 
create src/typings.d.ts 
create angular-cli.json 
create e2e/app.e2e-spec.ts 
create e2e/app.po.ts 
create e2e/tsconfig.json 
create .gitignore 
create karma.conf.js 
create package.json 
create protractor.conf.js 
create tslint.json 

Successfully initialized git. 

Installing packages for tooling via npm. 


这 个 安装 过 程 需 要 一 段 时 间 ， 请 一 定 等 待 安装 完毕 ， 命 令 行 重新 出 现 光标 提示 时 才 算 安装 完毕 。 


这 个 命令 为 我 们 新 建 了 一 个 名 为 “hello-angular” 的 项 目 。 进 入 该 项 目 目录 ， 键 入 code 可 以 打开 IDE 看 到 如 图 1.1 所 示 的 界面 。 


README.md X 
# HelloAngular 


E 


This project was generated with [angular-cli](h 


.editorconfig 
-gitignore 
angular-cli.json 
karma.conf.js 
package.json 
protractor.conf.js 
README.mdad 
tslint.json 


34 Development server 
Run "ng serve for a dev server. Navigate to 
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## Code scaffolding 
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Run ‘ng generate component component-name' to gener 
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## Build 
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Run ‘ng build to build the project. The build arti 
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$4 Running unit tests 
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Run 'ng test' to execute the unit tests via [Karma] 
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$4 Running end-to-end tests 
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Run 'ng e2e' to execute the end-to-end tests via [F 
Before running the tests make sure you are serving 
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## Deploying to Github Pages 


图 1.1 VSCode 管 理 项 目 


使 用 Mac 的 用 户 可 能 发 现 找 不 到 我 们 刚才 使 用 的 命令 行 code， 需 要 通过 IDE 安 装 一 下 。 上 点击 F1， 输 入 install， 即 可 看 到 “在 Path 中 安装 Code 命令 ”， 选 择 之 后 就 可 以 了 ， 如 图 1.2 所 示 。 


资源 管理 器 »install 


4 打开 的 编辑 器 扩展 : 安装 扩展 
README.md Extensions: Install 
4 HELLO-ANGULAR 扩展 : 从 VSIX 2R... 
^ e2e Extensions: Install from VSIX... 


P src 扩展 : 显示 已 安装 扩展 


angular-cli](h 


.editorconfig Extensions: Show Installed Extensions 


.gitignore Shell 命令 : 从 PATH pEi" code" $$ Navigate to 
angular-cli.json Shell Command: Uninstall 'code' command from PATH 


karma.conf.js Shell 命令 : 在 PATH 中 安装 code" 命令 
package.json Shell Command: Install 'code' command in PATH 


图 1.2 Mac 用 户 需 要 安装 命令 行 


项 目的 文件 结构 如 下 ， 日常 开发 中 真正 需要 关注 的 只 有 src 目 录 : 


README .md -- 项 目 说 明文 件 (Markdown 格 式 ) 
angular-cli.json -- Angular-CLI 配 置 文件 
e2e -- m$ (e2e) 测试 代码 目录 


app.e2e-spec.ts 
app.po.ts 


tsconfig.json 
karma.conf.js -- Karma 单 元 测试 (Unit Testing) 配置 文件 
package.json -- _ node 打包 文 
protractor.conf.js - 端 到 端 (e2e) 测试 配置 文件 
src -- 源码 目录 
app -- 应 用 根 目录 
app.component.css -- 根 组 件 样式 
app.component.html -- 根 组 件 模板 
app.component.spec.ts ”-- 根 组 件 单元 测试 
app.component.ts -- 根 组 件 ts 文 件 
app.module.ts -- 根 模块 
index.ts --app 索 引 【〈 集 中 暴露 需要 给 外 部 使 用 的 对 象 ， 方 便 外 部 引用 ) 
assets -- 公共 资源 目录 《图 像 、 文 本 、 视 频 等 ) 
environments -- 环境 配置 文件 目录 
[- environment.prod.ts -- 生产 环境 配置 文件 
environment.ts -- 开发 环境 配置 文件 
favicon.ico -- 站 点 收藏 图 标 
index.html -- AH 
main.ts -- 入 口 ts 文 件 
polyfills.ts -- 针对 浏览 器 能 力 增强 的 引用 文件 (一 般 用 于 兼容 不 支持 某 些 新 特性 的 浏览 器 
styles.css -- 全 局 样式 文件 
test.ts -- 测试 入 口 文件 
tsconfig.json -- TypeScript 配 置 文件 
typings.d.ts -- 项 目 中 使 用 的 类 型 定义 文件 
tslint.json -- 代码 Lint 静 态 检查 文件 


大 概 了 解 了 文件 目录 结构 后 ， 我 们 重新 回 到 命令 行 ， 在 应 用 根 目录 键入 ng serve 可 以 看 到 应 用 编译 打包 后 server 运 行 在 4200 端 口 。 你 应 该 可 以 看 到 下 面 这 样 的 输出 : 


wangpengdeMacBook-Pro:hello-angular wangpeng$ ng serve 

** NG Live Development Server is running on http://localhost:4200. ** 
Hash: 0c80f9e8c32908aad0be 
Time: 8497ms 

chunk {0} styles.bundle.js, styles.bundle.map (styles) 184 kB (3) [initial] [rendered] 
chunk {1} main.bundle.js, main.bundle.map (main) 5.33 kB {2} [initial] [rendered] 
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.22 MB [initial] [rendered] 
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered] 
webpack: bundle is now VALID. 


打开 浏览 器 输入 http://localhost:4200 即 可 看 到 程序 运行 成 功 啦 ! 如 图 1.3 所 示 。 


localhost 
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app works! 


自动 生成 的 太 没有 成 就 感 了 是 不 是 ， 那 么 我 们 动手 改 一 下 吧 。 保 持 运 行 服务 的 命令 窗口 ， 然 后 进入 VSCode， 打 开 src/app/app.component.ts 修 改 title， 比 如 : titlez"This is a hello-angular app", 
保存 后 返回 浏览 器 看 一 下 吧 ， 结 果 已 经 更 新 了 ， 如 图 1.4 所 示 。 这 种 热 装载 的 特性 使 得 开发 变 得 很 方便 。 


oc 


This is a hello-angular app 


图 1.4 第 一 次 小 修改 


1.4 第 一 个 组 件 


现在 ， 为 我 们 的 App 增 加 一 个 Component 吧 ， 在 命令 行 窗口 输入 ng generate component login--inline-template--inline-style。 顾 名 思 义 ， 参 数 generate 是 用 来 生成 文件 的 ， 参 数 component 是 
说 明 我 们 要 生成 一 个 组 件 ，login 是 我 们 的 组 件 名 称 ， 你 可 以 自己 想 个 其 他 有 意思 的 名 字 。 后 面 的 两 个 参数 是 告诉 angular-cli: 生成 组 件 时 ， 请 把 组 件 的 HTML 模 板 和 CSS 样 式 和 组 件 放 在 同一 个 文件 中 (其 
实 分 开 文 件 更 清晰 ， 但 第 一 个 例子 我 们 还 是 采用 inline 方 式 了 ) : 


wangpengdeMacBook-Pro:blog wangpeng$ ng generate component login --inline-template --inline-style 

installing component 
create src/app/login/login.componen 
create src/app/login/login.componen 

wangpengdeMacBook-Pro:blog wangpengS$ 


.Spec.ts 
ES 


是 感觉 这 个 命令 行 太 长 了 ? 幸运 a 文 么 想 ， 所 以 你 可 以 把 上 面 的 命令 改写 成 ng g c login-it-is， 也 就 是 说 可 以 用 generate 的 首 字母 g 来 代替 generate， 用 component 的 首 字 和 母 c 
PON 类 似 的 --inline-template 的 两 个 词 分 别 取 首 字母 变 成 -it。 


angular-cli 为 我 们 在 login 目 录 下 生成 了 两 个 文件 ， 其 中 login.component.spec.ts 是 测试 文件 ， 我 们 这 里 暂时 不 提 。 另 一 个 login.component.ts 就 是 我 们 新 建 的 Component 了 。 


Angular 提 倡 的 文件 命名 方式 是 这 样 的 : 组 件 名 称 .component.ts， 组 件 的 HTML 模 板 命 名 为 : 组 件 名 称 .component.html， 组 件 的 样式 文件 命名 为 : 组 件 名 称 .component.css。 建 议 读者 在 编码 中 尽 
量 遵循 Google 的 官方 建议 。 


我 们 新 生成 的 Login 组 件 源码 如 下 : 


import { Component, OnInit ) from 'Gangular/core'; 


//Q@Component 是 Angular 提 供 的 装饰 器 函数 ， 用 来 描述 Compoent 的 元 数据 
// 其 中 selector 是 指 这 个 组 件 的 在 HTML 模 板 中 的 标签 是 什么 
//templateAK AN (inline) 的 HTMI 模 板 ， 如 果 使 用 单独 文件 可 用 templateUrl 
//stylesÉBUN (inline) 的 CSS 样 式 ， 如 果 使 用 单独 文件 可 用 styleUrls 
@QComponent ({ 
selector: 'app-login', 
template: ' 
<p> 
login Works! 
</p> 


, 
styles: [] 


export class LoginComponent implements OnInit { 
constructor() { } 
ngOnInit() ( 
} 

} 


这 个 组 件 建成 后 我 们 怎么 使 用 呢 ? 注意 上 面 的 代码 中 @Component 修 饰 配 置 中 的 selector: ‘app-login”， 这 意味 着 我 们 可 以 在 其 他 组 件 的 template 中 使 用 <app-login> </app-login> 来 引用 我 们 的 
这 个 组 件 。 


现在 我 们 打开 src/app/app.component.html 加 入 我 们 的 组 件 引 用 : 


«hl» 

((title]] 
«/h1» 
«app-login»«/app-login» 


保存 后 返回 浏览 器 ， 可 以 看 到 我 们 的 第 一 个 组 件 也 显示 出 来 了 ， 如 图 1.5 所 示 。 


二 一 — C localhost:4200 


This is a hello-angular app! 


login Works! 


图 1.5 第 一 个 组 件 的 显示 


1.5 一 些 基础 概念 


有 了 前 面 的 例子 ， 就 可 以 粗略 介绍 一 些 Angular 的 基础 概念 了 ， 这 些 基 础 概念 在 后 面 的 章节 中 会 更 详细 地 讲解 。 


1.6 引导 过 程 


Angular 2 通过 在 main.ts 中 引导 AppModule 来 启动 应 用 。 针 对 不 同 的 平台 ，Angular 提 供 了 很 多 引导 选项 。 下 面 的 代码 是 通过 即时 (JiT) 编译 器 动态 引导 ， 一 般 在 进行 开发 调试 时 ， 默 认 采 用 这 种 方 


式 : 
//main.ts 
import './polyfills.ts'; 
// 连同 Angular 编 译 器 一 起 发 布 到 浏览 
import { platformBrowserDynamic ) from 'Q@angular/platform-browser-dynamic'; 
import { enableProdMode ) from 'Gangular/core'; 
import { environment } from './environments/environment'; 
import { AppModule ) from './app/'; 


Ei 


f (environment.production) { 
enableProdMoce (); 

} 
//Angular 编 译 器 在 浏览 器 中 编译 并 引导 该 应 用 
platformBrowserDynamic() .bootstrapModule (AppModule); 


男 一 种 方式 是 使 用 预 编译 器 (Ahead-Of-Time, AoT) 进行 静态 引导 ， 静 态 方案 可 以 生成 更 小 、 启 动 更 快 的 应 用 ， 建 议 优先 使 用 它 ， 特 别 是 在 移动 设备 里 或 高 延迟 网 络 下 。 使 用 static 选 项 ，Angular 编 
译 器 作为 构建 流程 的 一 部 分 提前 运行 ， 生 成 一 组 类 工厂 。 它 们 的 核心 就 是 AppModuleNgFactory。3 引 导 预 编译 的 AppModuleNgFactory 的 语法 和 动态 引导 AppModule 类 的 方式 很 相似 : 


// 不 把 编译 器 发 布 到 浏览 


import { platformBrowser } from 'Gangular/platform-browser'; 


// 静态 编译 器 会 生成 一 个 AppMogdule 的 工厂 AppModuleNgFactory 
import { AppModuleNgFactory ) from './app.module.ngfactory'; 


// S| 5 AppModuleNgFactory 
platformBrowser ().bootstrapModuleFactory (AppModuleNgFactory); 


看 起 来 很 头 大 是 不 是 ”好 在 我 们 在 Angular-CLH 中 很 少 需要 直接 操作 这 些 ， 后 面 会 讲 道 ，Angular-CLH 专 门 为 我 们 发 布 到 生产 环境 提供 了 专门 的 命令 ， 可 以 自动 化 地 完成 这 些 配置 。 这 种 便利 性 也 是 我 们 
为 什么 推荐 在 Angular 开 发 中 使 用 Angular-CLH， 它 可 以 让 你 更 多 地 去 思考 业务 逻辑 ， 而 不 是 各 种 复杂 的 环境 配置 。 


1.7 ”代码 的 使 用 和 安 委 


A /angulat2 /ng2-tut 
如 果 你 之 前 没有 使 用 过 Git 的 话 ， 我 在 这 里 简单 说 一 下 怎么 查看 代码 。 所 有 代码 都 是 存放 在 GitHub 上 的 ， 如 果 你 访问 上 面 的 链接 ， 可 以 在 线 看 代码 。 但 是 如 果 想 下 载 到 本 地 使 用 ， 需 要 机 器 上 安装 Git。 
不 同 操作 系统 的 使 用 方法 如 下 : 

- Windows: 可 以 去 https://tortoisegit.org 下 载 TtortoiseGit。 

: Linux: Ubuntu 应 该 默认 就 有 ， 没 有 的 话 请 使 用 sudo apt-get install gitfesudo apt-get install git-core。 

. Mac OSX: 请 先 安装 brew， 然 后 使 用 brew install gito 

安装 好 之 后 ， 打 开 命 令 行 工具 使 用 git clone https://github.com/wpcfan/awesome-tutorials 下 载 。 然 后 键入 git checkout chap01 切 换 到 本 章 代码 。 


下 一 章 我 们 再 继续 ， 记 住 ， 大 叔 能 学 会 的 你 也 能 。 


第 2 章 ”用 Form 表 单 做 一 个 登录 控件 


从 这 一 章 起 我 们 会 打造 一 个 待 办 事项 列表 的 应 用 (Todo) ， 这 个 Todo 应 用 让 人 们 可 以 输入 新 的 待 办 事项 ， 事 项 完成 后 ， 可 以 标记 其 为 完成 ， 也 可 以 全 部 反 转 目前 列表 中 事项 的 完成 状态 ， 以 及 清除 所 
有 已 完成 的 事项 。 列 表 中 还 会 有 一 个 筛选 器 ， 用 户 可 以 通过 筛选 器 筛选 出 所 有 活动 的 事项 以 及 已 完成 的 事项 。 这 个 应 用 在 各 个 前 端 框架 的 比较 中 经 常用 到 ， 因 为 它 麻雀 虽 小 五 脏 俱全 。 


当然 我 们 会 再 给 这 个 应 用 加 点 料 ， 首 先 这 个 应 用 应 该 有 Web API 后 台 ， 而 不 仪 仅 是 一 个 内 存 版 本 。 再 有 ， 我 们 要 打造 一 个 支持 多 用 户 的 待 办 事项 列表 ， 也 就 是 说 有 用 户 的 注册 和 登录 ， 每 个 用 户 用 自己 
的 用 户 名 和 密码 登录 后 都 可 以 看 到 自己 的 待 办 事项 列表 。 这 样 的 话 它 的 逻辑 相对 完整 了 ， 增 删改 查 都 有 ，HTTP 请 求 、 返 回 俱全 。 在 一 个 平台 折腾 明白 这 个 App 就 基本 可 以 上 手 干 活 了 ， 这 货 简直 就 是 新 时 代 
的 Hello World 啊 。 


第 2 章 我 们 会 通过 制作 一 个 登录 组 件 了 解 引 用 、 双 向 数据 绑 定 、 依 赖 性 注入 以 及 表单 的 验证 。 


中 


第 3 章 我 们 开始 在 登录 之 外 又 建立 了 Todo 组 件 ， 因 为 有 多 个 组 件 ， 所 以 我 们 也 会 学 习 路 由 的 概念 。 并 且 在 这 一 章 我 们 会 建立 一 个 虚拟 Web 服 务 ， 使 得 我 们 从 一 开始 设计 时 就 是 按照 HTTP 的 异步 性 质 进 


行 设计 的 。 


第 4 章 我 们 分 折 了 Todo 组 件 ， 让 每 一 个 子 组 件 负责 的 部 分 更 加 清楚 。 但 分 拆 后 就 会 出 现 组 件 间 通 信 的 问题 ， 我 们 会 一 起 学 习 父子 组 件 的 通信 方式 。 随 着 功能 变 复杂 ， 我 们 会 想 把 相对 独立 的 功能 分 离 出 
来 ， 这 就 需要 我 们 为 Todo 单 独 构建 一 个 模块 。 这 一 章 我 们 会 把 欠缺 的 功能 都 完善 掉 ， 也 就 是 说 就 单机 版 的 Todo 来 说 ， 功 能 已 经 比较 完善 了 。 


第 5 章 我 们 会 从 实际 操作 的 角度 一 起 来 思考 和 构建 多 用 户 版 本 的 待 办 事项 应 该 如 何 搭建 。 这 一 章 我 们 会 比较 细致 地 讨论 多 种 类 型 的 路 由 。 


第 6 章 我 们 引入 了 第 三 方 样式 库 ， 这 也 是 前 端 工作 中 经 常 碰 到 的 。 我 们 一 起 用 第 三 方 样式 库 改 造 我 们 的 应 用 。 这 一 章 我 们 还 会 一 起 按 谷歌 官方 的 最 佳 实践 优化 模块 ， 并 且 会 学 习 如 何 引入 第 三 方 
Javascript 类 库 以 及 如 何 发 布 到 生产 环境 。 当 然 我 们 还 会 接触 到 两 个 重要 概念 : 管道 和 指令 。 


第 7 章 ， 我 们 补 全 了 注册 功能 ， 还 利用 Angular 2 提供 的 动画 功能 添加 了 一 些 炫 酷 的 动画 效果 。 

第 8 章 我 们 会 介绍 一 个 Angular 的 杀手 铀 Rx，Rx 需 要 的 学 习 曲 线 较 陡 ， 所 以 这 一 章 我 们 举 了 很 多 小 例子 来 帮 你 理解 。 并 且 我 们 也 会 一 起 把 Todo 改 造成 流 式 应 用 。 
第 9 章 我 们 更 进一步 ， 将 业界 最 流行 的 状态 管理 模式 Redux 引 入 进来 ，Redux 会 以 中 心 化 的 存储 方式 ， 让 我 们 摆脱 那些 散在 程序 各 个 角落 的 难以 维护 的 状态 。 
这 一 章 我 们 会 通过 制作 一 个 登录 组 件 来 了 解 引用 、 双 向 数据 绑 定 、 依 赖 性 注入 以 及 表单 的 验证 。 


引用 是 Angular 2 提供 的 一 种 可 以 在 模板 内 引用 DOM 元 素 或 者 指令 的 变量 ， 我 们 经 常会 发 现在 实际 工作 中 ， 我 们 需要 在 类 似 于 普通 Javascript 开 发 中 需要 的 那样 去 引用 一 些 DOM 元 素 做 一 些小 处 理 ， 这 
个 引用 的 机 制 可 以 使 我 们 很 方便 地 达成 这 个 目的 。 


双向 数据 绑 定 一 向 都 是 Angular 引 以 为 豪 的 优点 ， 可 以 减轻 很 多 编码 的 工作 量 ，Angular 2 底层 通过 Rx 来 实现 这 种 双向 绑 定 ， 使 得 双向 绑 定 和 Angular 1.x 同 样 简单 但 性 能 更 好 。 


依赖 性 注入 (Dependency Injection) 这 个 概念 是 Google 一 向 在 Android 开 发 领域 极力 提倡 的 ， 这 种 机 制 可 以 让 应 用 的 组 件 、 服 务 等 松 耦 合 ， 使 得 应 用 模块 化 ， 可 维护 性 更 佳 。 依 赖 注入 是 将 所 依赖 的 
传递 给 将 使 用 的 从 属 对 象 〈 即 客户 端 ) ， 而 不 是 从 客户 端 声 明和 构造 ， 这 种 模式 通常 也 叫 控制 反 转 (loC-Inverse of Control) 。 


表单 验证 一 直 是 客户 端 和 前 端 开发 中 最 常见 的 功能 需求 ，Angular 2 作为 通用 的 开发 平台 ， 当 然 提供 了 极为 强大 的 内 建 表单 验证 功能 。 这 一 章 我 们 也 会 进行 一 个 初 体验 。 


2.1 对 于 login 组 件 的 小 改造 


在 hello-angular\src\app\login\login.component.ts 中 更 改 其 模板 为 下 面 的 样子 : 


import { Component, OnInit ) from 'Gangular/core'; 


GComponent ({ 
selector: 'app-login', 
template: ' 
«div» 
«input type-"text"» 
«button»Loginc/button» 
«/div» 
Uu 


, 
styles: [] 
export class LoginComponent implements OnInit { 


constructor() { } 


ngOnInit() { 
} 


我 们 增加 了 一 个 文本 输入 框 和 一 个 按钮 ， 保 存 后 返回 浏览 器 可 以 看 到 结果 ， 如 图 2.1 所 示 。 你 会 发 现 一 个 有 趣 的 特性 ， 我 们 大 多 数 情况 下 不 需要 重启 服务 ， 结 果 就 会 自动 刷新 了 。 这 个 特性 极 大 地 提升 了 
我 们 的 开发 生产 效率 ， 当 然 如 果 我 们 做 了 较 大 改动 ， 我 还 是 建议 大 家 重启 服务 的 。 


© localhost 4200 


This is our first angular app 


Login 


图 2.1 为 组 件 增加 了 一 个 输入 框 和 按钮 


接 下 来 我 们 尝试 给 Login 按 钮 添加 一 个 处 理 方法 <button (click) ="onClickQ0">Login</button>。 (click) 表示 我 们 要 处 理 这 个 button 的 click 事 件 ， 圆 括号 是 说 发 生 此 事件 时 ， 调 用 等 号 后 面 的 表达 
式 或 函数 。 等 号 后 面 的 onClick(0 是 我 们 自己 定义 在 LoginComponent 中 的 函数 ， 这 个 名 称 你 可 以 随便 定 成 什么 ， 不 一 定 叫 onClick(。 


下 面 我 们 就 来 定义 这 个 函数 ， 在 LoginComponent 中 写 一 个 叫 onClick0 的 方法 ， 内 容 很 简单 ， 就 是 把 “button was clicked” 输 出 到 Console。 


onClick() { 
console.log('button was clicked'); 


返回 浏览 器 ， 并 按 F12 调 出 开发 者 工具 。 当 你 点 击 Login 时 ， 会 发 现 Console 窗 口 输出 了 我 们 期 待 的 文字 。 如 图 2.2 所 示 ， 右 边 的 部 分 就 是 Chrome 开 发 者 工具 了 。 


中 | Hements Console Sources » 


This is our first angular app [so.. | co.. Sm. 
Mm 
Login | v — 


Bi inlinejs 
Bs main.bundle;js 
Í styles.bundle js 
» C» (no domain) 
> C5 Augury 
> JWT Analyzer & I 
» C» file// 
: Ps 


— IE 
ti @ | O | scope watch 
Y Call Stack Not Paused 
Not Paused 


v Breakpoints 


No Breakpoints 
> XHR Breakpoints 
; Console x 


© Ww top v O Preserve log 
anguiar z 15 running in tne Iang- JILLS 7. 
development mode. Call enableProdMode() to 
enable the production mode. 


button was clicked first.component,ts:3 J 


图 2.2 Chrome 开发 者 工具 


如 果 你 感觉 左右 的 布局 不 舒服 ， 可 以 点 击 右上 角 的 三 个 竖 着 排列 的 点 的 那个 按钮 ， 如 图 2.3 所 示 ， 可 以 选择 单独 窗口 ， 窗 口 底部 和 窗口 右 方 等 。 


(X Ó] | Elements Console Sources Network Timeline Profiles » 


© O NM y View: E = | 站 Preservelog C 
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AIl XHR JS CSS Img Media Font Doc WS Manifest Oti 


Dock side O0 L2 O 


Hide console drawer Esc 
Search all files Æ opt F 
More tools » 


I 


200ms 400ms 600ms 


Shortcuts 
Settings 
Help 


图 2.3 Chrome 开发 者 工具 的 布局 方式 


那么 如 果 要 在 onClick 中 传递 一 个 参数 ， 比 如 是 上 面 的 文本 输入 框 输 入 的 值 ， 怎 么 处 理 呢 ? 我 们 可 以 在 文本 输入 框 标签 内 加 一 个 #usernameRef， 这 个 叫 引 用 (reference) 。 注 意 这 里 引用 的 是 input 对 
象 ， 我 们 如果 想 传递 input 的 值 ， 可 以 用 usernameRef.value， 然 后 就 可 以 把 onClick() 方 法 改 成 onClick (usernameRef.value) : 


<div> 

«input #usernameRef type="text"> 

<button (click)-"onClick (usernameRef.value) "»Login«/button» 
«/div» 


在 Component 内 部 的 onClick 方 法 也 要 随 之 改写 成 一 个 接受 username 的 方法 


onClick(username) { 
console.log (username); 


} 
现在 我 们 再 看 看 结果 是 什么 样子 ， 在 文本 输入 框 中 键入 “hello”， 点 击 Login 按 钮 ， 观 察 Console 窗 口 : hello 被 输出 了 ， 如 图 2.4 所 示 。 


[R à] Elements Console Sources » 
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图 2.4 Console 4 Y 


好 了 ， 现 在 我 们 再 加 一 个 密码 输入 框 ， 然 后 改写 onClick 方 法 使 其 可 以 同时 接收 2 个 参数 : 用 户 名 和 密码 。 代 码 如 下 : 


import { Component, OnInit ) from 'Gangular/core'; 
GComponent ({ 
selector: 'app-login', 
template: ' 
«div» 
«input 4usernameRef type-"text"» 
«input 4passwordRef type-"password"» 
<button (click)-"onClick(usernameRef.value, passwordRef.value)"»Loginc/button» 
«/div» 


, 


styles: [] 
)) 


export class LoginComponent implements OnInit { 


constructor() { } 


ngOnInit() ( 
} 


onClick(username, password) { 
console.log('username:' + username + "XnNr" + "password:" + password); 


} 


看 看 结果 吧 ， 在 浏览 器 中 第 一 个 输入 框 里 输入 “wang”， 第 二 个 输入 框 里 输入 “1234567” ， 观 察 Console 窗 口 ， 如 图 2.5 所 示 ，Bingol 
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图 2.5 “在 Chtome 开 发 者 工具 中 观察 元 素 引 用 的 使 用 


2.2. ”建立 一 个 服务 完成 业务 逻辑 


如 果 我 们 把 登录 的 业务 逻辑 在 onClick 方 法 中 完成 ， 这 样 当然 也 可 以 ， 但 是 这 样 做 的 耦合 性 太 强 了 。 设 想 一 下 ， 如 果 我 们 增加 了 微 信 登录 、 微 博 登 录 等 ， 业 务 逻 辑 会 越 来 越 复杂 ， 显 然 我 们 需要 把 这 个 业 


务 逻 辑 分 离 出 去 。 


那么 我 们 接 下 来 创建 一 个 Authservice 吧 ， 首 先 我 们 要 在 在 src 中 新 建 一 个 叫做 core 的 文件 夹 (srevappNcore) ， 然 后 命令 行 中 输入 ng g s corevauth. (s 这 里 是 service 的 缩写 ，core) 。auth.service.ts 


和 auth.service.spec.ts 这 两 个 文件 应 该 已 经 出 现在 你 的 目录 里 了 。 


下 面 我 们 为 这 个 service 添 加 一 个 方法 ， 你 可 能 注意 到 这 里 我 们 为 这 个 方法 指定 了 返回 类 型 和 参数 类 型 。 这 就 是 TypeScript 带 来 的 好 处 ， 有 了 类 型 约束 ， 你 在 别处 调用 这 个 方法 时 ， 如 果 给 出 的 参数 类 型 


或 返回 类 型 不 正确 ，1DE 就 可 以 直接 告诉 你 错 了 


import { Injectable } from 'Gangular/core'; 


QGInjectable|() 
export class AuthService { 


constructor() { } 


loginWithCredentials (username: string, password: string): boolean { 
if (username === 'wangpeng') 

return true; 
return false; 


} 


等 一 下 ， 这 个 service 虽 然 被 创建 了 ， 但 仍然 无 法 在 Component 中 使 用 。 当 然 你 可 以 在 Component 中 import 这 个 服务 ， 然 后 实例 化 后 使 用 ， 但 是 这 样 做 并 不 好 ， 仍 然 是 一 个 紧 厢 合 的 模式 ，Angular 2 


提供 了 一 种 依赖 性 注入 (Dependency Injection) 的 方法 。 


什么 是 依赖 性 注入 


如 果 不 使 用 DI (依赖 性 注入 ) 的 时 候 ， 我 们 自然 的 想法 是 这 样 的 ， 在 login.component.ts 中 import 引 入 AuthService， 在 构造 中 初始 化 service， 在 onClick 中 调用 service: 


import { Component, OnInit } from '@angular/core'; 
/ /3| XAuthService 
import ( AuthService } from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/O0EBPS/Text/../core/auth.service'; 


GComponent ({ 


selector: 'app-login', 
template: ' 
«div» 
«input 4usernameRef type-"text"» 
«input 4passwordRef type-"password"» 
<button (click)-"onClick(usernameRef.value, passwordRef.value)"»Login«/button» 
«/div» 
1 
, 
styles: [] 
)) 


export class LoginComponent implements OnInit { 


// 声 明成 员 变 量 ， 其 类 型 为 AuthService 
service: AuthService; 


constructor() { 
this.service - new AuthService(); 


} 


ngOnInit() ( 
} 


onClick(username, password) { 

// 调 用 service 的 方法 

console.log('auth result is: ' + this.service.loginWithCredentials (username, 
password)); 


Aa 


这 么 做 呢 也 可 以 跑 起 来 ， 但 存在 以 下 几 个 问题 : 
. 由 于 实例 化 是 在 组 件 中 进行 的 ， 意 味 着 我 们 如 果 更 改 service 的 构造 函数 的 话 ， 组 件 也 需要 更 改 。 
" 如 果 我 们 以 后 需要 开发 、 测 试 和 生产 环境 配置 不 同 的 AuthService， 以 这 种 方式 实现 会 非常 不 方便 。 


下 面 我 们 看 看 如 果 使 用 DI 是 什么 样子 的 ， 首 先 我 们 需要 在 组 件 的 修饰 器 中 配置 Authservice， 然 后 在 组 件 的 构造 函数 中 使 用 参数 进行 依赖 注入 : 


( Component, OnInit } from 'Gangular/core'; 


impor! 
{ AuthService ) from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/106136/OEBPS/Text/../core/auth.service'; 


impor! 


GComponent ({ 
selector: 'app-login', 
template: ' 
«div» 
«input #usernameRef type-"text"» 
«input 4passwordRef type-"password"» 
«button (click)-"onClick(usernameRef.value, passwordRef.value)"»Login«/button» 
«/div» 
' 
styles: [], 
// 在 providers 中 配置 AuthService 
providers: [AuthService] 
)) 
export class LoginComponent implements OnInit { 
// 在 构造 函数 中 将 AuthService 示 例 注入 到 成 员 变 量 service 中 
// 而 且 我 们 不 需要 显 式 声明 成 员 变 量 service 了 
constructor (private service: AuthService) { 


} 


t 4 
t 4 


ngOninit() ( 
} 


onClick(username, password) { 
console.log('auth result is: ' + this.service.loginWithCredentials (username, 
password)); 


} 


看 到 这 里 你 会 发 现 我 们 仍然 需要 Import 相关 的 服务 ，import 是 要 将 类 型 引入 进来 ， 而 provider 里 面 会 配置 这 个 类 型 的 实例 。 当 然 即 使 这 样 还 是 不 太 磷 ， 可 不 可 以 不 引入 Authservice 呢 ”答案 是 可 以 
的 。 


我 们 看 一 下 app.module.ts， 这 个 根 模块 文件 中 我 们 会 发 现 也 有 个 providers， 根 模块 中 的 这 个 providers 是 配置 在 模块 中 全 局 可 用 的 service 或 参数 的 : 


providers: [ 
(provide: 'auth',  useClass: AuthService] 


] 


providers 是 一 个 数组 ， 这 个 数组 呢 其 实 是 把 你 想 要 注入 到 其 他 组 件 中 的 服务 配置 在 这 里 。 大 家 注意 到 我 们 这 里 的 写法 和 上 面 有 点 区 别 ， 没 有 直接 写成 : 
providers: [AuthService] 


而 是 给 出 了 一 个 对 象 ， 里面 有 两 个 属性 ，provide 和 useClass，provide 定 义 了 这 个 服务 的 名 称 ， 有 需要 注入 这 个 服务 的 就 引用 这 个 名 称 就 好 。useClass 指 明 这 个 名 称 对 应 的 服务 是 一 个 类 ， 本 例 中 就 是 
AuthService 了。 这 样 定义 好 之 后 ， 我 们 就 可 以 在 任意 组 件 中 注入 这 个 依赖 了 。 


下 面 我 们 改动 一 下 login.component.ts， 去 掉头 部 的 import{AuthService}from'http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16136/OEBPS/Text/../core/auth.service'; 和 组 件 修饰 器 中 的 providers， 更 改 其 构造 函数 为 : 


constructor (GInject('auth') private service) { 


} 


我 们 去 掉 了 service 的 类 型 声明 ， 但 加 了 一 个 修饰 符 @lnject ('auth') ， 这 个 修饰 符 的 意思 是 请 到 系统 配置 中 找到 名 称 为 auth 的 那个 依赖 注入 到 我 修饰 的 变量 中 。 当 然 这 样 改 完 后 你 会 发 现 Inject 这 个 修 
饰 符 系统 不 识别 ， 我 们 需要 在 @angular/core 中 引用 这 个 修饰 符 ， 现 在 login.component.ts 看 起 来 应 该 是 下 面 这 个 样子 : 


import { Component, OnInit, Inject } from 'Gangular/core'; 


GComponent ({ 
selector: 'app-login', 
template: ' 
«div» 
«input #usernameRef type-"text"» 
«input #passwordRef type-"password"» 
<button (click)-"onClick(usernameRef.value, passwordRef.value)"»Login«/button» 
«/div» 


t 4 
t 4 


styles: [] 
)) 


export class LoginComponent implements OnInit { 


constructor (GInject('auth') private service) { 


) 


ngOninit() ( 
} 


onClick(username, password) { 
console.log('auth result is: ' + this.service.loginWithCredentials (username, 
password)); 


意 依赖 性 注入 不 是 仅仅 为 Service 服 务 的 ， 任 何 的 类 都 可 以 通过 这 种 方式 提供 和 注入 ， 它 提供 了 一 种 解 耦 的 方式 ， 通 过 Providers 提 供 ， 通 过 constructor 注 入 : 


constructor (userService: UserService) ( 
userService.addUser((username: 'wang', password:'1234']); 


} 


注入 器 从 哪 得 到 的 依赖 ? 它 可 能 在 自己 内 部 容器 里 已 经 有 该 依赖 了 。 如 果 它 没有 ， 也 能 在 提供 商 的 帮助 下 新 建 一 个 。 提 供 商 就 是 一 个 用 于 交付 服务 的 配方 ， 它 被 关联 到 一 个 令 牌 。Angular 会 使 用 一 些 
自 带 的 提供 商 来 初始 化 这 些 注入 器 。 我 们 必须 自行 注册 属于 自己 的 提供 商 ， 通 常用 组 件 或 者 指令 元 数据 中 的 providers 数 组 进行 注册 。 简 单 的 类 提供 商 是 最 典型 的 例子 。 只 要 在 providers 数 值 里 面 提 到 该 类 
就 可 以 了 。 


providers: [ AuthService, UserService ] 


除了 上 面 那 种 最 简单 的 提供 方式 之 外 ， 我 们 还 能 以 令 牌 方式 提供 。 我 们 通常 在 构造 函数 里 面 ， 为 参数 指定 类 型 ， 让 Angular 来 处 理 依赖 注入 。 该 参数 类 型 就 是 依赖 注入 器 所 需 的 令 牌 。Angular 把 该 令 牌 
传 给 注入 器 ， 然 后 把 得 到 的 结果 赋 给 参数 。 下 面 是 一 个 典型 的 例子 : 


providers: [ 
( provide: 'auth', useClass: AuthService ], 
( provide: 'user', useClass: UserService ], 
( provide: BASE URL, useValue: 'http://localhost:3000/todos' }, 
AuthGuardService 


] 


我 们 发 现 providers 数 组 是 由 一 系列 的 provide 对 象 构成 的 ， 这 个 对 象 是 {provide:http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...,useClass:http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...} 或 者 {provide:http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...,useValue:http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebook/uncompressed/16136/OEBPS/Text/...} 形 式 的 。 我 们 把 第 一 个 属性 叫 令 牌 ， 第 二 个 属性 叫 定义 对 象 。 这 两 种 形式 分 别 对 应 类 供应 商 和 值 供 应 商 。 


值 供应 商 通常 用 来 进行 运行 期 常量 设置 ， 比 如 网 站 的 基础 地 址 和 功能 标志 等 。 那 么 最 简单 的 那 种 情形 是 怎么 回 事 呢 ? 比如 : providers:[AuthGuardService]， 其 实 这 是 一 个 语法 糖 ， 等 价 于 


(provide:AuthGuardService,useClass:AuthGuardService], 


(provide:BASE URL,useValue: ‘http://localhost:3000/todos”} 这 个 例子 和 其 他 的 好 像 还 是 不 太一 样 ，BASE_URL 不 是 个 字符 串 对 象 也 不 是 一 个 类 对 象 。 这 是 我 们 创建 的 一 个 令 牌 ， 这 样 创建 的 令 牌 
拥有 一 个 友好 的 名 字 ， 但 不 会 与 其 他 的 同名 令 牌 发 生 冲 突 : 


import { OpaqueToken } from '@angular/core'; 


export const BASE URL = new OpaqueToken('BASE URL'); 


当然 还 有 另外 两 种 情形 ， 一 种 叫 别名 提供 商 ， 我 们 为 同一 个 对 象 起 了 不 同 的 别名 : 


( provide: MinimalLogger, useExisting: LoggerService ], 


另 一 种 叫 工厂 提供 商 ， 提 供 商 通过 调用 工厂 国 数 来 新 建 一 个 依赖 对 象 ， 如 下 所 示 : 


( provide: HELLO, useFactory:  helloFactory(2), deps: [Greeting, HelloService] } 


使 用 这 项 技术 ， 可 以 用 包含 了 一 些 依赖 服务 和 本 地 状态 输入 的 工厂 函数 来 建立 一 个 依赖 对 象 。helloFactory 自 身 不 是 提供 商工 厂 国 数 。 真 正 的 提供 商工 厂 函 数 是 helloFactory 返 回 的 函数 : 


export function helloFactory(take: number) { 
return (greeting: Greeting, helloService: HelloService): string => ( 
/* http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/... */ 
E 
E 


2.3 ”双向 数据 绑 定 
接 下 来 的 问题 是 我 们 是 否 只 能 通过 这 种 方式 进行 表现 层 和 逻辑 之 间 的 数据 交换 呢 ? 如 果 我 们 希望 在 组 件 内 对 数据 进行 操作 后 再 反馈 到 界面 应 该 怎么 处 理 呢 ? Angular 2 提供 了 一 个 双向 数据 绑 定 的 机 制 。 
这 个 机 制 是 这 样 的， 在 组 件 中 提供 成 员 数据 变量 ， 然 后 在 模板 中 引用 这 个 数据 变量 。 我 们 来 改造 一 下 login.component.ts， 首 先 在 class 中 声明 两 个 数据 变量 username 和 password: 


username = "" 
password = "" 


然后 去 掉 onClick 方 法 的 参数 ， 并 将 内 部 的 语句 改造 成 如 下 样子 : 


console.log('auth result is: ' 
+ this.service.loginWithCredentials (this.username, this.password)); 


去 掉 参 数 的 原因 是 双向 绑 定 后 ， 我 们 通过 数据 成 员 变 量 就 可 以 知道 用 户 名 和 密码 了 ， 不 需要 再 传递 参数 了 。 而 成 员 变量 的 引用 方式 是 this. 成 员 变 量 。 然 后 我 们 来 改造 模板 : 


«div» 
«input type="text" 
[ (ngModel) ] "username" 


/> 


«input type="password" 


[ (ngModel) ] 2»"password" 
/> 
<button (click)="onClick()">Login</button> 
«/div» 


[ (ngModel) ]- “username” 这 个 看 起 来 很 别扭， 稍微 解释 一 下 ， 方 括号 [的 作用 是 说 把 等 号 后 面 当成 表达 式 来 解析 而 不 是 当成 字符 串 ， 如 果 我 们 去 掉 方 括号 那 就 等 于 说 是 直接 给 这 个 ngModel 赋 值 
成 “username” 这 个 字符 串 了 。 方 括号 的 含义 是 单 向 绑 定 ， 就 是 说 我 们 在 组 件 中 给 mode| 赋 的 值 会 设置 到 HTML 的 input 控 件 中 。 


[0] 是 双向 绑 定 的 意思 ， 就 是 说 HTML 对 应 控件 的 状态 改变 会 反射 设置 到 组 件 的 model 中 。ngModel 是 FormModule 中 提供 的 指令 ， 它 负责 从 Domain Model (这 里 就 是 username 或 password， 以 后 
我 们 可 以 绑 定 更 复杂 的 对 象 ) 中 创建 一 个 FormControl 的 实例 ， 并 将 这 个 实例 和 表单 的 控件 绑 定 起 来 。 


同样 ， 对 于 click 事 件 的 处 理 ， 我 们 不 需要 传 入 参数 了 ， 因 为 其 调用 的 是 刚刚 我 们 改造 的 组 件 中 的 onClick 方 法 。 现 在 我 们 保存 文件 后 打开 浏览 器 看 一 下 ， 效 果 和 上 一 节 的 应 该 一 样 。 本 节 的 完整 代码 如 
下 : 


/ /1ogin.component.ts 
import { Component, OnInit, Inject } from 'Gangular/core'; 


GComponent ({ 
selector: 'app-login', 


template: ' 
«div» 
«input type="text" 
[ (ngModel) ]-"username" 
/> 
«input type="password" 
[ (ngModel) ]2»"password" 
/? 
<button (click)-"onClick()"»Login«/button» 
«/div» 
styles: [] 


export class LoginComponent implements OnInit { 


username = ''; 
password = ''; 


constructor (GInject('auth') private service) { 


} 


ngOnInit() ( 
} 


onClick() { 
console.log('auth result is: ' 
+ this.service.loginWithCredentials (this.username, this.password)); 


) 


24 表单 数据 的 验证 


通常 情况 下 ， 表 单 的 数据 是 有 一 定 规则 的 ， 我 们 需要 依照 其 规则 对 输入 的 数据 做 验证 以 及 反馈 验证 结果 。Angular 2 中 对 表单 验证 有 非常 完善 的 支持 ,我 们 继续 上 面 的 例子 ， 在 login 组 件 中 ,我们 定义 
了 一 个 用 户 名 和 密码 的 输入 框 ， 现 在 我 们 来 为 它们 加 上 规则 。 首 先 我 们 定义 一 下 规则 ， 用 户 名 和 密码 都 是 必须 输入 的 ， 也 就 是 不 能 为 空 。 更 改 |ogin.component.ts 中 的 模板 为 下 面 的 样子 : 
«div» 
«input required type="text" 
[ (ngModel) ]="username" 
/ C E 
» 


((usernameRef.valid]] 

«input required type="password" 
[ (ngModel) ]="password" 
fpasswordRef-"ngModel" 
/> 
((passwordRef.valid]] 

«button (click)-"onClick ()"»Login«/button» 

«/div» 


注意 ， 我 们 只 是 为 username 和 password 两 个 控件 加 上 了 required 这 个 属性 ， 表 明 这 两 个 控件 为 必 填 项 。 通 过 #usernameRef= “ngModel” 我 们 重新 又 加 入 了 引用 ， 这 次 的 引用 指向 了 ngModel， 这 
个 引用 是 要 在 模板 中 使 用 的 ， 所 以 才 加 入 这 个 引用 。 如 果 不 需 要 在 模板 中 使 用 ， 可 以 不 要 这 人 句 。{{ 表 达 式 }} 双 花 括号 表示 解析 括号 中 的 表达 式 ， 并 把 这 个 值 输出 到 模板 中 。 


这 里 我 们 为 了 可 以 显 性 地 看 到 控件 的 验证 状态 ， 直 接 在 对 应 控件 后 输出 了 验证 的 状态 。 初 始 状态 可 以 看 到 两 个 控件 的 验证 状态 都 是 false， 试 着 填写 一 些 字符 在 两 个 输入 框 中 ， 看 看 状态 变化 吧 ， 如 图 2.6 
所 示 。 


This is our first angular app 


false false| Login 


E2.6 ”表单 验证 状态 


我 们 知道 了 验证 的 状态 是 什么 ， 但 是 如 果 我 们 想 知 道 验 证 失败 的 原因 怎么 办 呢 ? 我 们 只 需要 将 {{usernameRef.valid} 蔡 换 成 {{usernameRef.errorsljjson}} 即 可 。| 是 管道 操作 符 ， 用 于 将 前 面 的 结果 通过 
管道 输出 成 另 一 种 格式 ， 这 里 就 是 把 errors 对 象 输出 成 son 格 式 的 意思 。 看 一 下 结果 吧 ， 返 回 的 结果 如 下 ， 见 图 2.7。 


This is our first angular app 


| | ( "required": true } | | ( "required": true } 


如 果 除 了 不 能 为 空 ， 我 们 为 username 再 添加 一 个 规则 试 试看 呢 ， 比 如 字符 数 不 能 少 于 3: 


«input type="text" 
[ (ngModel) ]2-"username" 
JdusernameRef-"ngModel" 
required 
minlength-"3" 


/> 


这 时 打开 浏览 器 ， 看 一 下 效果 ， 如 图 2.8 所 示 。 


This is our first angular app 


| "minlength": | "requiredLength": 3, "actualLength": 1 } } [| { "required": true ! | Login | 


图 2.8 ”多 规则 验证 


现在 我 们 试 着 把 {表达 式 替换 成 友好 的 错误 提示 ,我 们 想 在 有 错误 发 生 时 显示 错误 的 提示 信息 。 那 么 我 们 来 改造 一 下 template: 


<div> 
<input type="text" 
[ (ngModel) ]="username" 
#usernameRef="ngModel" 
required 
minlength="3" 
/? 
(( usernameRef.errors json }} 
«div *nglIf-"usernameRef.errors?.required"»5this is required«/div» 
«div *ngIf-"usernameRef.errors?.minlength"»should be at least 3 charactors«/div» 
«input required type-"password" 
[ (ngModel) ] 2»"password" 
fpasswordRef-"ngModel" 
/? 
«div *ngIf-"passwordRef.errors?.required"5this is required«/div» 
<button (click)-"onClick()"»Login«/button» 
«/div» 


nglf 也 是 一 个 Angular 2 的 指令 ， 顾 名 思 义 ， 是 用 于 做 条 件 判 断 的 。*nglf= “usernameRef.errors?.required” 的 意思 是 当 usernameRef.errors.required 为 true 时 显示 div 标 签 。 那 么 ， 那 个 ?是 干 嘛 的 


呢 ? 因为 errors 可 能 是 个 null， 如 果 这 个 时 候 调 用 errors 的 redquired 属 性 肯定 会 引发 异常 ， 那 么 ?就 是 标明 errors 可 能 为 空 ， 在 其 为 空 时 就 不 用 调用 后 面 的 属性 了 。 


如 果 我 们 把 用 户 名 和 密码 整个 看 成 一 个 表单 的 话 ， 我 们 应 该 把 它们 放 在 一 对 <form> </form > 标签 中 ， 类 似 地 加 入 一 个 表单 的 引用 formRef : 


«div» 
«form dformRef-"ngForm"» 


«input type="text" 
[ (ngModel) ]2»"username" 
JdusernameRef-"ngModel" 
required 
minlength-"3" 
o» 
«div *nglIf-"usernameRef.errors?.required"»this is required«/div» 
«div *ngIf-"usernameRef.errors?.minlength"»should be at least 3 charactors«/div» 
«input type-"password" 
[ (ngModel) ]-"password" 
fpasswordRef-"ngModel" 
required 
/? 
«div *ngIf-"passwordRef.errors?.required"»this is required«/div» 
<button (click)-"onClick ()"»Login«/button» 
</form> 


</div> 


这 时 运行 后 会 发 现 原本 好 用 的 代码 出 错 了 ， 这 是 由 于 如 果 在 一 个 大 的 表单 中 ，ngModelI 会 注册 成 Form 的 一 个 子 控件 ， 注 册子 控件 需要 一 个 name， 这 要 求 我 们 显 式 地 指定 对 应 控件 的 name， 因 此 我 们 
需要 为 input 增 加 name 属 性 : 


<div> 
<form #formRef="ngForm"> 
<input type="text" 
name-"username" 


[ (ngModel) ]-"username" 

JdusernameRef-"ngModel" 

required 

minlength-"3" 

/> 

«div *nglf-"usernameRef.errors?.required"»this is required«/div» 

«div *ngIf-"usernameRef.errors?.minlength"»should be at least 3 charactors«/div» 


«input type="password" 
name-"password" 


[ (ngModel) ]-»"password" 

fpasswordRef-"ngModel" 

required 

/> 

«div *ngIf="passwordRef.errors?.required">this is required«/div» 


<button (click)-"onClick ()"»Login«/button» 
<button type-"submit"»Submit«/button» 
</form> 


既然 我 们 增加 了 一 个 formRef， 我 们 就 看 看 formRef.value 有 什么 吧 。 首 先 为 form 增 加 一 个 表单 提交 事件 的 处 理 <form#formRef= “ngForm”  (ngSubmit) = “onSubmit (formRef.value) " >, 


然后 在 组 件 中 增加 一 个 onSubmit 方 法 : 


onSubmit (formValue) { 
console.log (formValue); 


你 会 发 现 formRef.value 中 包括 了 表单 所 有 填写 项 的 值 。 还 是 在 浏览 器 Console 中 观察 一 下 ， 如 图 2.9 所 示 。 


This is our first angular app 


DOM ze ECOINME guum 。 xA) 性 能 内 存 仿真 试验 


© ^| [A^] [@ °] lel X 


b [object Object] Ípassword: "1234", username: Wang 上 


first.component.ts (3,1) 


图 2.9 表单 引用 


有 时 候 ， 在 表单 项 过 多 时 需要 对 表单 项 进行 分 组 ，HTML 中 提供 了 fieldset 标 签 用 来 处 理 。 那 么 我 们 看 看 怎么 和 Angular 2 结合 吧 : 


«div» 
«form 4formRef-"ngForm" (ngSubmit)-"onSubmit (formRef.value)"» 
«fieldset ngModelGroup-"login"» 
«input type="text" 
name-"username" 


[ (ngModel) ]2"username" 
JdusernameRef-"ngModel" 

required 

minlength-"3" 

/> 

«div *nglIf-"usernameRef.errors?.required"»this is required«/div» 


«div *ngIf-"usernameRef.errors?.minlength"»should be at least 3 charactors«/div» 


«input type-"password" 
name-"password" 


[ (ngModel) ] "password" 

fpasswordRef-"ngModel" 

required 

/> 

«div *ngIf="passwordRef.errors?.required">this is required«/div» 


<button (click)-"onClick ()"»Login«/button» 
<button type-"submit"»Submit«/button» 
«/fieldset» 
«/form» 
«/div» 


«fieldset ngModelGroup=“login”> 意 味 着 我 们 对 于 fieldset 之 内 的 数据 都 分 组 到 了 login 对 象 中 ， 在 浏览 器 Console 中 可 以 看 到 这 个 对 象 的 输出 ， 如 图 2.10 所 示 。 


This is our first angular app 


[wans — $5 |feeee | [Login] [Submit] 


DOM 资源 管理 器 控制 台 调试 程序 网 络 (> 性 能 内 存 (58 


S| Ae] ON Sl X 


HTML1300: 进行 了 导航 ， 
localhost:4200 
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 
main.bundle.js (471,5) 
4 [object Object] (login: object (...)) 
first.component.ts (3,1) 
b [functions] 


b ^ proto _ [object Object] 1...) 
4 login [object Object] 1...) 
b [functions] 
P proto [object Object] 1...) 
password "1234" 
username "wang" 


图 2.10 ”表单 验证 


接 下 来 我 们 改写 onSubmit 方 法 用 来 替代 onClick， 因 为 看 起 来 这 两 个 按钮 重复 了 ， 我 们 需要 去 掉 onClick。 首 先 去 掉 template 中 的 <button (click) ="onClick0">Login</button> 


， 然 后 把 <button 
type= "submit"> 标 签 后 的 Subpmit 文 本 替换 成 Login ， 最 后 改写 onSubmit 方 法 : 


onSubmit(formValue) { 
console.log('auth result is: ' 
+ this.service.loginWithCredentials (formValue.login.username 


, formValue.login.password)); 


} 


在 浏览 器 中 试验 一 下 吧 ， 所 有 功能 正常 工作 。 


2.5 ”验证 结果 的 样式 自 定 义 


如 果 我 们 在 开发 工具 中 查看 网 页 源码 ， 可 以 看 到 经 过 演 染 后 的 控件 HTML 代 码 ， 如 图 2.11 所 示 。 


This is our first angular app 


this is required 


this is required 
Login | 


— — 


DOM HIWERA 
(is 


«IDOCTYPE html» 样式 pers tM 
4 <html> 
p «head». «/head» 4 内 联 样式 | 
4 «body» 
4 «app-root nghost-hfm.1»"^*» 
«hi ngcontent-hfm.1»""»This is our first angular app«/hi» 
4 «app-first ngcontent -hfm-1»«**» 
4 «div» 
4 «form classs"ng-pristine ng-invalid ng-towched"» 
4 «fieldset classs"ng-pristine ng-invalid mg-toucbed" ng-reflect-names"login" ngModelGroups" login"» 
«input names"username" classs"ng-pristine ng-invalid ng-touched" requireds"" types"text" minleagth="3" ng-reflect-minlengthes"3" 
ng-reflect-names"username" /> 
4«1!--template bindingss( "ng-reflect-ng-if^: "true" )--» 
«div»this is required«/div» 
«!--teeplate bindingss( "ng-reflect-ng-1f^: aall )--? 
«input names"passwond" classs"ng-untouched ng-pristioe ng-invalid" requirede"" type="password" ng-nreflect-nases"passwond" /> 
«!--teeplate bindings*( "ng-reflect-ng-I1f^: "troe" ) 


«div»this is required«/dív» 
«button types"subsit"»Login« /button» 


hired body — app-root app-first dw — foemang-peistine —— fieldsetng-pristi. input ney -pristino 


图 2.11 验证 的 样式 


用 户 名 控件 的 HTML 代 码 是 下 面 的 样子 : 在 验证 结果 为 false 时 input 的 样式 是 ng-invalid: 


<input 
name-"username" 
class-"ng-pristine ng-invalid ng-touched" 
requireg-"" 
type="text" 
minlength="3" 
ng-reflect-minlength="3" 
ng-reflect-name-"username"» 


类 似 地 可 以 实验 一 下 ， 填 入 一 些 字符 满足 验证 要 求 之 后 ， 看 input 的 HTML 是 下 面 的 样子 ， 在 验证 结果 为 true 时 input 的 样式 是 ng-valid : 


«input 
name-"username" 
class-"ng-touched ng-dirty ng-valid" 
requireg-"" 
type="text" 
ng-reflect-model="ssdsds" 
minlength="3" 
ng-reflect-minlength="3" 
ng-reflect-name-"username"» 


知道 这 个 后 ， 我 们 可 以 自 定 义 不 同 验证 状态 下 的 控件 样式 。 在 组 件 的 修饰 符 中 把 styles 数 组 改写 一 下 : 


styles: [' 
.ng-invalid( 


border: 3px solid red; 
) 
.ng-valid( 

border: 3px solid green; 
) 


'] 


保存 一 下 ， 返 回 浏览 器 可 以 看 到 ， 验 证 不 通过 时 ， 如 图 2.12 所 示 。 


图 2.12 ”验证 失败 的 样式 


验证 通过 时 是 这 样 的 ， 如 图 2.13 所 示 。 


图 2.13 ”验证 通过 的 样式 


最 后 说 一 下 ， 我 们 看 到 这 样 设置 完 样式 后 连 form 和 和 fieldset 都 一 起 设置 了 ， 这 是 由 于 form 和 和 fieldset 也 在 样式 中 应 用 了 .ng-valid 和 .ng-valid， 那 怎么 解决 呢 ? 只 需要 在 .ng-valid 加 上 input 即 可 ， 这 表明 


应 用 于 input 类 型 控件 并 且 class 引 用 了 ng-invalid 的 元 素 ， 如 下 所 示 : 


styles: [' 
input.ng-invalid( 
border: 3px solid red; 
} 
input.ng-valid( 
border: 3px solid green; 
} 
di 


很 多 开发 人 员 不 大 了 解 CSS， 其 实 CSS 还 是 比较 简单 的 ， 我 建议 先 从 Selector 开 始 看 ，Selector 的 概念 弄 懂 后 Angular 2 的 开发 中 用 CSs 就 会 顺畅 很 多 。 具 体 可 见 W3School 中 对 于 CSs Selctor 的 参考 


和 https://css-tricks.com/multiple-class-id-selectors/。 


2.6 ”组 件 样 式 


刚刚 我 们 其 实 已 经 使 用 了 组 件 样式 ， 这 里 简单 介绍 一 下 什么 是 组 件 样 式 。 对 于 我 们 写 的 每 个 Angular 组 件 来 说 ， 除 了 定义 HTML 模 板 之 外 ， 我 们 还 要 定义 用 于 模板 的 CSS 样 式 ， 指 定 任意 的 选择 器 、 规 则 
和 媒体 查询 。 


实现 方式 之 一 ， 是 在 组 件 的 元 数据 中 设置 styles 属 性 。styles 属 性 可 以 接受 一 个 包含 Css 代码 的 字符 串 数 组 。 通 常 我 们 只 给 它 一 个 字符 串 就 行 了 ， 就 像 我 们 在 LoginComponent 中 做 的 那样 : 


GComponent ({ 
selector: 'app-login', 
template: ' 
«div» 


«input type="text" 
[ (ngModel) ]-"username" 
/> 

«input type="password" 
[ (ngModel) ] 2»"password" 
/> 

<button (click)="onClick()">Login</button> 

«/div» 
styles: [' 


input.ng-invalid( 
border: 3px solid red; 

} 

input.ng-valid( 
border: 3px solid green; 


组 件 样式 在 很 多 方面 都 不 同 于 传统 的 全 局 性 样式 。 我 们 放 在 组 件 样式 中 的 选择 器 ， 只 会 应 用 在 组 件 自身 的 模板 中 。 上 面 这 个 例子 中 的 input 选 择 器 只 会 对 LoginComponent 模 板 中 的 <input> 标 签 生 
而 对 应 用 中 其 他 地 方 的 <input> 元 素 宫 无 影响 。 


VS 
d 


:CSS 类 名 和 选择 器 是 控件 范围 的 。 属 于 组 件 内 部 的 ， 它 不 会 和 应 用 中 其 他 地 方 的 类 名 和 选择 器 出 现 冲突 。 
- 组 件 的 样式 不 会 因为 别 的 地 方 修改 了 样式 而 被 意外 改变 。 

. 可 以 让 每 个 组 件 的 CSS 代 码 和 它 的 TypeSctript、HTML 代 码 放 在 一 起 ， 这 将 构成 清 更 整 洁 的 项 目 结构 。 

- 修改 或 移 除 组 件 的 CSS 代 码 时 ， 不 用 搜索 整个 应 用 来 看 它 有 没有 被 别处 用 到 。 

本 章 代 码 : https:/ /github.com/wpcfan/awesome-tutotials/tree/chap02 /angular2 /ng2-tut 


打开 命令 行 工具 使 用 git clone https://github.com/wpcfan/awesome-tutotials 载 。 然 后 键入 git checkout chap02 切 换 到 本 章 代 码 。 


2.7 ”小 练习 


1. 如 果 想 给 username 和 password 输 入 框 设置 默认 值 。 比 如 “请 输入 用 户 名 ”和 “请 输入 密码 ”， 自 己 动手 试 一 下 吧 ，。 
2 如 果 想 在 输入 框 聚焦 时 把 默认 文字 清除 掉 ， 该 怎么 做 ? 


3. 如 果 想 把 默认 文字 颜色 设置 成 浅 灰色 该 怎么 做 ? 


第 3 草 ”建立 一 个 待 办 事项 应 用 


这 一 章 我 们 会 建立 一 个 更 复杂 的 待 办 事项 应 用 ， 当 然 ， 登 录 功 能 也 还 保留 ， 这 样 应 用 就 有 了 多 个 相对 独立 的 功能 模块 。 以 往 的 Web 应 用 根据 不 同 的 功能 跳 转 到 不 同 的 功能 页 面 。 但 目前 前 端的 趋势 是 开 
发 一 个 SPA (Single Page Application， 单 页 应 用 ) ， 所 以 其 实 我 们 应 该 把 这 种 跳 转 叫 视图 切换 : 根据 不 同 的 路 径 显 示 不 同 的 组 件 。 那 我 们 怎么 处 理 这 种 视图 切换 呢 ? 幸运 的 是 ， 我 们 无 需 寻 找 第 三 方 组 
件 ，Angular 官 方 内 建 了 自己 的 路 由 模块 。 我 们 会 在 接 下 来 的 学 习 中 逐渐 了 解 这 个 路 由 是 怎么 使 用 的 。 


同时 本 章 会 介绍 Angular 提 供 的 一 套 内 存 仿真 Web APl， 这 套 API 对 于 有 后 端 依赖 的 开发 者 是 极 大 的 福音 ， 我 们 可 以 不 用 等 待 后 人 台 开 发 人 员 开 发 完毕 就 可 以 自行 进行 前 端 开发 了 。 


3.1 建立 routing 的 步骤 


由 于 我 们 要 以 路 由 形式 显示 组 件 ， 因 此 建立 路 由 前 ， 让 我 们 先 把 src\app\app.component.html 中 的 <app-login> </app-login> 删 掉 。 
第 一 步 : 在 src/index.html 中 指定 基准 路 径 ， 即 在 <header> 中 加 入 <base href="/">， 它 指向 你 的 index.html 所 在 的 路 径 ， 浏 览 器 也 会 根据 这 个 路 径 下 载 css、 图 像 和 js 文件 ， 所 以 请 将 这 个 语句 放 在 
header 的 最 顶端 。 


第 二 步 : 在 src/app/app.module.ts 中 引入 RouterModule: 


import { RouterModule } from 'Gangular/router'; 


第 三 步 : 定义 和 配置 路 由 数组 ， 我 们 暂时 只 为 login 定 义 路 由 ,仍然 在 src/app/app.module.ts 中 的 imports 中 : 


imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
RouterModule.forRoot([ 
{ 
path: 'login', 
component: LoginComponent 


]) 
l; 


注意 ， 这 个 形式 和 其 他 的 比如 BrowserModule、FormModule 和 HTTPModule 的 表现 形式 好 像 不 太一 样 。 这 里 解释 一 下 ，forRoot 其 实 是 一 个 静态 的 工厂 方法 ， 它 返回 的 仍然 是 Module。 下 面 的 是 


Angular API 文 档 给 出 的 RouterModule.forRoot 的 定义 : 


forRoot(routes: Routes, config?: ExtraOptions) : ModuleWithProviders 


为 什么 叫 forRoot 呢 ?因为 这 个 路 由 定义 是 应 用 在 应 用 根部 的 ， 你 可 能 猜 到 了 还 有 一 个 工厂 方法 叫 forChild， 后 面 会 详细 讲述 它 。 接 下 来 ， 我 们 看 一 下 forRoot 接 受 的 参数 ， 参 数 看 起 来 是 一 个 数组 ， 每 
个 数组 元 素 是 一 个 形 如 {path: xxx,component:XXXComponent} 的 对 象 。 这 个 数组 就 叫做 路 由 定义 (RouteConfig) 数组 ， 每 个 数组 元 素 就 叫 路 由 定义 ， 目 前 我 们 只 有 一 个 路 由 定义 。 路 由 定义 这 个 对 象 包 


括 若 干 属性 : 


: path: 路 由 器 会 用 它 来 匹配 路 由 中 指定 的 路 径 和 浏览 器 地 址 栏 中 的 当前 路 径 ， 如 /login。 

: component: 导航 到 此 路 由 时 ， 路 由 器 需要 创建 的 组 件 ， 如 LoginComponent。 

redirectTo: 重 定 向 到 某 个 path， 使 用 场景 的 话 ， 比 如 在 用 户 输入 不 存在 的 路 径 时 重 定向 到 首页 。 
: pathMatch: 路 径 的 字符 匹配 策略 。 


: children: 子路 由 数组 。 


3.3 ”建立 模拟 Web 服 务 和 异步 操作 


实际 开发 中 ， 我 们 的 service 是 要 和 服务 器 API 进 行 交互 的 ， 而 不 是 现在 这 样 简单 地 操作 数组 。 但 问题 来 了 ， 现 在 没有 Web 服 务 ， 难 道真 要 自己 开发 一 个 吗 ? 答案 是 可 以 做 个 假 的 ， 假 作 真 时 真 订 假 。 我 


们 在 开发 过 程 中 经 常会 遇 到 这 类 问题 ， 等 待 后 端 开 发 的 进度 是 很 痛苦 的 。 所 以 Angular 内 建 提供 了 一 个 可 以 快速 建立 测试 用 Web 服 务 的 方法 : 内 存 (in-memory) 服务 器 。 


3.4 ”小 练习 


1. 如 果 我 们 要 实现 ToggleAll 这 个 功能 的 话 (点 击 后 ， 所 有 Todo 的 状态 全 部 反 转 ) ， 在 仅 考 虑 内 存 数据 的 基础 上 ， 应 该 怎么 操作 数组 可 以 实现 这 个 功能 呢 ? 


2. 如 果 要 实现 Clear Completed (点 击 后 删除 所 有 已 完成 的 Todo) We? 


3. 试 着 找 一 个 网 上 的 免费 API， 用 Angular 2 提供 HTTP 模 块 访问 和 解析 结果 ， 看 看 是 否 可 以 解析 成 功 ? 


第 4 章 ”进化 ! 将 应 用 模块 化 


通常 一 个 企业 的 代码 经 过 一 段 时 间 后 都 会 出 现 膨胀 ， 这 种 时 候 最 好 的 方式 就 是 模块 化 。 将 相对 独立 的 功能 模块 划分 出 来 ， 便 于 进行 管理 和 维护 。Angular 2 中 的 Module 就 是 用 来 处 理 这 种 情况 的 。 


Angular Module 是 一 个 用 @NgModule 修 饰 的 类 ，@NgModule 设 置 一 些 元 数据 告诉 Angular 怎 样 编译 和 运行 该 模块 。 同 时 这 些 元 数据 声明 哪些 是 Module 拥 有 的 组 件 、 指 令 和 管道 ， 哪 些 是 外 部 可 访 
问 的 组 件 。 
在 模块 化 的 时 候 ， 我 们 往往 会 同时 进行 重 构 ， 在 本 章 我 们 进行 了 组 件 的 重新 规划 。 这 时 候 我 们 碰 到 了 新 问题 : 如 何 进行 组 件 间 的 通信 ?本 章 我 们 会 一 起 来 解决 这 个 问题 。 


除 此 之 外 ， 我 们 还 会 学 习 路 由 参数 的 处 理 以 及 一 个 可 以 快速 搭建 Web API 的 工具 json-server。 


4.1 一 个 复杂 组 件 的 分 拆 


上 一 节 的 末尾 我 们 推 彻 了 大 量 代 码 ， 可 能 你 看 起 来 都 有 点 晤 了 ， 这 就 是 典型 的 一 个 功能 经 过 一 段 时 间 的 需求 票 积 后 ， 代 码 也 不 可 避免 的 腑 肿 起 来 。 现 在 我 们 看 看 垮 么 分 拆 一 下 吧 ， 如 图 4.1 所 示 。 


Header 


blablabla 


tetssts 


getting up 


3 items left AII iv Completed Footer Clear completed 


图 4.1 页 面 的 功能 区 划分 


我 们 的 应 用 似乎 可 以 分 为 Header，Main 和 Footer 几 部 分 (如 图 4.1 所 示 ) 。 首 先 我 们 来 建立 一 个 新 的 Component， 键 入 ng g c todo/todo-footer。 然 后 将 src\app\todo\todo.component.html 中 
的 <footer> http://www.hzcourse.comyVresource/readBook?path=/openresources/teach_ebook/uncompressed/16136/OEBPS/Text/.…</footer> 段 落 剪 切 到 src\appPNtodoNtodo-footermtodo- 


footer.component.html 中 。 


«footer class-"footer" *nglf-"todos?.length > 0"> 
«span class-"todo-count"» 
<strong>{ {todos?.length}}</strong> ((todos?.length == 1 ? 'item' : 'items']) left 
</span> 
<ul class="filters"> 
<li><a href-""»All«/a»«/li» 
<li><a href="">Active</a></li> 
<li><a href="">Completed</a></li> 
</ul> 
<button class="clear-completed">Clear completed</button> 
</footer> 


观察 上 面 的 代码 ， 我 们 看 到 似乎 所 有 的 变量 都 是 todos?.length， 这 提醒 我 们 其 实 对 于 Footer 来 说 ， 我 们 并 不 需要 传 入 todos， 而 只 需要 给 出 一 个 item 计 数 即 可 。 那 么 我 们 来 把 所 有 的 todos?.length 改 
成 temCount: 


«footer class-" footer" *ngIf-"itemCount > 0"> 
«span class-"todo-count"» 
«strong»[(itemCount)]«/strong» ((itemCount == 1 ? 'item' : 'items']) left 
</span> 
<ul class="filters"> 
<li><a href-""»All«/a»«/li» 
<li><a href="">Active</a></li> 
<li><a href="">Completed</a></li> 
</ul> 
<button class="clear-completed">Clear completed</button> 
</footer> 


也 就 是 说 如 果 在 src\app\todo\todo.component.html 中 我 们 可 以 用 <app-todo-footer[itemCount]= “todos?.length”> </app-todo-footer> 去 传递 Todo 项 目 计 数 给 Footer 即 可 。 所 以 在 


src\app\todo\todo.component.html 中 网 我 们 剪 切 掉 代码 的 位 置 加 上 这 人 句 吧 。 当 然 ， 如 果 要 让 父 组 件 可 以 传递 值 给 子 组 件 ， 我 们 还 需要 在 子 组 件 中 声明 一 下 。@Input0 是 输入 型 绑 定 的 修饰 符 ， 用 于 把 
数据 从 父 组 件 传 到 子 组 件 : 


import { Component, OnInit, Input } from 'Gangular/core'; 


GComponent ({ 
selector: 'app-todo-footer', 


templateUrl: './todo-footer.component.html', 
styleUrls: ['./todo-footer.component.css'] 

)) 

export class TodoFooterComponent implements OnInit { 


// 声 明 itemcount 是 可 以 一 个 可 输入 值 CASI READ 
QInput () itemCount: number; 
constructor() { } 


ngOnInit() ( 
} 
} 


运行 一 下 看 看 效果 ， 应 该 一 切 正常 ! 如 图 4.2 所 示 。 


This is a hello-angular app! 


blablabla 


what x 


2 items left Al ^ Active Completed Clear completed 


图 4.2 ”分 折 footet 之 后 的 待 办 事项 列表 


4.2 封 半 成 独立 蛋 块 


现在 我 们 的 todo 目 录 下 有 好 多 文件 了 ， 而 且 我 们 观察 到 这 个 功能 相对 很 独立 。 这 种 情况 下 我 们 似乎 没有 必要 将 所 有 的 组 件 都 声明 在 根 模块 AppModule 当 中 ， 因 为 类 似 像 子 组 件 没有 被 其 他 地 方 用 到 。 
Angular 中 提供 了 一 种 组 织 方式 ， 那 就 是 模块 。 模 块 和 根 模 块 很 类 似 ， 我 们 先 在 todo 目 录 下 建 一 个 文件 src\app\todo\todo.module.ts。 


import { CommonModule } from 'Gangular/common'; 

import { NgModule } from 'Gangular/core'; 

import { HttpModule } from 'Gangular/http'; 

import { FormsModule ) from 'Gangular/forms'; 

import ( routing) from './todo.routes' 

import { TodoComponent ) from './todo.component'; 

import { TodoFooterComponent } from './todo-footer/todo-footer.component'; 
import { TodoHeaderComponent ) from './todo-header/todo-header.component'; 
import { TodoService } from './todo.service'; 

&NgModule ( 1 


imports: [ 
CommonModule, 
FormsModule, 
HttpModule, 
routing 


, 

declarations: [ 
TodoComponent, 
TodoFooterComponent, 
TodoHeaderComponent 

l, 

providers: [ 
(provide: 'todoService', useClass: TodoService] 


)) 
export class TodoModule {} 


注意 一 点 ， 我 们 没有 引入 BrowserModule， 而 是 引入 了 CommonModule。 导 入 BrowserModule 会 让 该 模块 公开 的 所 有 组 件 、 指 令 和 管道 在 AppModule 下 的 任何 组 件 模板 中 直接 可 用 ， 而 不 需要 额 
外 的 繁琐 步骤 。CommonModule 提 供 了 很 多 应 用 程序 中 常用 的 指令 ， 包 括 Nglf 和 NgFor 等 。BrowserModule 导 入 了 CommonModule 并 且 重 新 导出 了 它 。 最 终 的 效果 是 : 只 要 导入 BrowserModule 就 自 
动 获得 了 CommonModule 中 的 指令 。 


几乎 所 有 要 在 浏览 器 中 使 用 的 应 用 的 根 模块 (AppModule) 都 应 该 从 @angular/platform-browser 中 导入 BrowserModule。 在 其 他 任何 模块 中 都 不 要 导入 BrowserModule， 应 该 改 成 导入 
CommonModule。 它 们 需要 通用 的 指令 。 它 们 不 需要 重新 初始 化 全 应 用 级 的 提供 商 。 由 于 和 根 模 块 很 类 似 ， 我 们 就 不 展开 讲 了 。 需 要 做 的 事情 是 把 TodoComponent 中 的 TodoService 改 成 用 
QInject ('todoService') 来 注入 。 但 是 注意 一 点 ,我们 需要 模块 自己 的 路 由 定义 。 我 们 在 todo 目 录 下 建立 一 个 todo.routes.ts 的 文件 ， 和 根 目录 下 的 类 似 : 


import { Routes, RouterModule } from 'Gangular/router'; 
import { TodoComponent ) from './todo.component'; 


export const routes: Routes = [ 


{ 


path: 'todo', 
component: TodoComponent 


} 


]; 


export const routing = RouterModule.forChild (routes); 


这 里 我 们 只 定义 了 一 个 路 由 就 是 “todo” ， 另 外 一 点 和 根 路 由 不 一 样 的 是 export const routing- RouterModule.forChild (routes) ;， 我 们 用 的 是 forChild 而 不 是 forRoot， 因 为 forRoot 只 能 用 于 根 
目录 ， 所 有 非 根 模块 的 其 他 模块 路 由 都 只 能 用 forChild。 下 面 就 得 更 改 根 路 由 了 ，src\app\app.routes.ts 看 起 来 是 这 个 样子 : 


( Routes, RouterModule } from '@angular/router'; 
( LoginComponent ) from './login/login.component'; 


tt 


export const routes: Routes = [ 


path: '', 
redirectTo: 'login', 
pathMatch: 'full' 


path: 'login', 
component: LoginComponent 


path: 'todo', 
redirectTo: 'todo' 
} 
]; 


export const routing = RouterModule.forRoot (routes); 


注意 ， 我 们 去 掉 了 TodoComponent 的 依赖 ， 而 且 更 改 todo 路 径 定义 为 redirecTo 到 todo 路 径 ， 但 没有 给 出 组 件 ， 这 叫做 “无 组 件 路 由 ”， 也 就 是 说 后 面 的 事情 是 TodoModule 负 责 的 。 此 时 我 们 就 可 
以 去 掉 AppModule 中 引用 的 Todo 相 关 的 组 件 了 : 


import ( BrowserModule ) from 'Qangular/platform-browser'; 
import ( NgModule } from 'Gangular/core'; 

import { FormsModule ) from 'Gangular/forms'; 

import { HttpModule ) from 'Gangular/http'; 

import { TodoModule ) from './todo/todo.module'; 

import ( InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryTodoDbService } from './todo/todo-data'; 
import { AppComponent ) from './app.component'; 

import ( LoginComponent ) from './login/login.component'; 
import ( AuthService ) from './core/auth.service'; 

import { routing ) from './app.routes'; 

&NgModule ( 1 


declarations: [ 
AppComponent, 

LoginComponent 

l; 

imports: [ 

BrowserModule, 

FormsModule, 

HttpModule, 

InMemoryWebApiModule.forRoot (InMemoryTodoDbService), 
routing, 
TodoModule 

l; 

providers: [ 

(provide: 'auth',  useClass: AuthService} 
l; 
bootstrap: [AppComponent] 


)) 
export class AppModule { } 


此 时 我 们 注意 到 其 实 没有 任何 一 个 地 方 目前 还 需 引 用 <app-todo> </app-todo> 了 ， 这 就 是 说 我 们 可 以 安全 地 把 selector “app-todo”， 从 Todo 组 件 中 的 @Component 修 饰 符 中 删除 了 。 


4.3 ”更 真实 的 Web 服 务 


这 里 我 们 不 想 再 使 用 内 存 Web 服 务 了 ， 所 以 我 们 使 用 一 个 更 “ 真 " 的 Web 服 务 : json-server。 使 用 npm install-g json-server 安 装 json-server。 然 后 在 todo 目 录 下 建立 todo-data.json。 


json-server 的 强大 之 处 在 于 可 以 根据 一 个 或 多 个 json 数 据 建 立 一 个 完整 的 Web 服 务 ， 提 供 Restfu| 的 API 形 式 。 比 内 存 Web 服 务 好 的 地 方 在 于 ， 我 们 可 以 通过 浏览 器 或 一 些 工 具 (比如 Postman) 检验 
API 的 有 效 性 和 数据 传递 : 


{ 


"todos": [ 
{ 
"id": "f8230191-7799-438d-8878-fcble468fc78", 
"desc": "blablabla", 
"completed": false 


"id": "dd65a7c0-e24f-6c66-862e-0999ea504ca0", 
"desc": "getting up", 
"completed": false 


"id": "C1092224-4064-5b921-77a9-3fc091fbbqa87", 
"desc": "you wanna try", 
"completed": false 


"id": "e89d582b-1a90-a0f1-be07-623ddb29d55e", 
"desc": "have to say good", 
"completed": false 


在 src\app\todo\todo.service.ts 中 更 改 : 


// private api url = 'api/todos'; 
private api url = 'http://localhost:3000/todos'; 


现在 ， 我 们 的 json 结 构 并 不 在 data 节 点 下 了 ， 所 以 请 将 addTodo 和 getTodos 中 then 语 句 中 的 resjson().data 蔡 换 成 resjson()。 在 AppModule 中 删 掉 内 存 Web 服 务 相关 的 语句 : 


import ( BrowserModule ) from 'Gangular/platform-browser'; 
import { NgModule } from 'Gangular/core'; 
import { FormsModule } from 'Gangular/forms'; 


import { HttpModule } from 'Gangular/http'; 

import { TodoModule ) from './todo/todo.module'; 

import { AppComponent ) from './app.component'; 

import ( LoginComponent ) from './login/login.component'; 
import { AuthService } from './core/auth.service'; 

import { routing ) from './app.routes'; 


&NgModule (1 
declarations: [ 
AppComponent, 
LoginComponent 
l; 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
routing, 
TodoModule 
l]; 
providers: [ 
(provide: 'auth',  useClass: AuthService} 


l, 
bootstrap: [AppComponent] 


export class AppModule { } 


在 一 个 命令 行 窗 口 ， 进 入 项 目 目录 ， 输 入 ng serve。 然 后 另外 打开 一 个 命令 窗口 ， 进 入 项 目 目录 ， 输 入 json-server/src/appyVtodo/todo-datajson， 然 后 回 到 浏览 器 的 http://localhost:4200， 如 图 
4.3 所 示 。 


欣赏 一 下 成 果 吧 。 
试验 增 、 删 、 改 、 查 动作 时 ， 如 果 你 有 兴趣 可 以 打开 另 一 个 浏览 器 窗口 ， 输 入 http:Wlocalhost:3000/todos， 每 次 操作 完 之 后 刷新 一 下 这 个 浏览 器 窗口 ， 看 看 服务 器 数据 是 如 何 变化 的 。 
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图 4.3 ”用 Auguty 揪 件 查看 成 果 


44 完善 Todo 应 用 


在 结束 本 节 前 ， 我 们 得 给 Todo 应 用 收 个 属 ， 还 差 一 些 功能 没完 成 : 

从 架构 上 来 讲 ， 我 们 似乎 还 可 以 进一步 构建 出 TodoList 和 TodoItem 两 个 组 件 。 
` 全 选 并 反 转 状态 。 

. 底部 筛选 器 : All. Active. Completed. 

. 清理 已 完成 项 目 。 

下 面 先 看 如 何 构建 Todoltem 和 TodoList 组 件 。 


在 命令 行 窗口 键入 ng g c todo/todo-item，angular-cli 会 十 分 聪明 地 帮 你 在 todo 目 录 下 建 好 Todoltem 组 件 ， 并 且 在 TodoModule 中 声明 。 一 般 来 说 ， 如 果 要 生成 某 个 模块 下 的 组 件 , 输入 ng g ct& 
块 名 称 /组 件 名 称 即 可 。 好 的 ， 类 似 地 我 们 再 建立 一 个 TodoList 控 件 ，ng g c todo/todo-list。 我 们 希望 未 来 的 todo.component.html 是 下 面 这 个 样子 的 : 


<section class="todoapp"> 

«app-todo-header 
placeholder-"What do you want" 
(textChanges) -"onTextChanges (Sevent) " 
(onEnterUp)-"addTodo()" > 

«/app-todo-header» 

«app-todo-list 
[todos]-" todos" 
(onRemoveTodo) 7" removeTodo (Sevent) " 
(onToggleTodo) 7"toggleTodo (Sevent)" 
> 


</app-todo-list> 
«app-todo-footer [itemCount]="todos?.length"></app-todo-footer> 
</section> 


那么 Todoltem 哪 儿 去 了 呢 ?”Todoltem 是 TodoList 的 子 组 件 ，Todoltem 的 模板 应 该 是 todos 循 环 内 的 一 个 todo 的 模板 。TodoList 的 HTML 模 板 看 起 来 应 该 是 下 面 的 样子 : 


«section class-"main" *ngIf-"todos?.length > 0"> 


«input class-"toggle-all" type-"checkbox"» 
«ul class-"todo-list"» 
«li *ngFor-"let todo of todos" [class.completed]-"todo.completed"» 
«app-todo-item 
[isChecked]-"todo.completed" 
(onToggleTriggered)-"onToggleTriggered (todo)" 
(onRemoveTriggered)-"onRemoveTriggered (todo) " 
[todoDesc]-"todo.desc"» 
«/app-todo-item» 
«/li» 
«/ul» 
«/section» 


么 我 们 先 从 最 底层 的 Todoltem 看 ， 这 个 组 件 怎 么 剥离 出 来 ? 首先 来 看 todo-item.component.html: 


«div class="view"> 
«input class-"toggle" type="checkbox" (click)= c LOggie [checked]-"isChecked"» 
«label [class.labelcompleted]-"isChecked" (click)-"toggle ()"»((todoDesc)]«/label» 
<button class-"destroy" (click)-2"remove(); Sevent.stopPropagation()"»«/button» 
«/div» 


我 们 需要 确定 有 哪些 输入 型 和 输出 型 参数 : 
.isChecked: 输入 型 参数 ， 用 来 确定 是 否 被 选中 ， 由 父 组 件 (TodoList) 设置 。 
- todoDesc: 输入 型 参数 ， 显 示 Todo 的 文本 描述 ， 由 父 组 件 设 置 。 
onToggleTriggered: 输出 型 参数 ， 在 用 户 点 击 checkbox 或 label 时 以 事件 形式 通知 父 组 件 。 在 Todoltem 中 我 们 是 在 处 理 用 户 点 击 事件 时 在 toggle 方 法 中 发 射 这 个 事件 。 
- onRemoveTriggered: 输出 型 参数 ， 在 用 户 点 击 删除 按钮 时 以 事件 形式 通知 父 组 件 。 在 TodoItem 中 当 处 理 用 户 点 击 按钮 事件 时 在 remove 方 法 中 发 射 这 个 事件 。 


确定 好 这 些 后 ， 事 情 就 变 的 很 简单 ， 在 组 件 中 以 @Input 标 示 你 的 输入 型 参数 ， 以 @Output 标 识 你 的 输出 型 参数 。 由 于 输出 型 参数 需要 向 上 发 射 事件 ， 所 以 需要 声明 成 一 个 EventEmitter 对 象 。 下 面 按 
着 我 们 刚刚 的 思路 ， 我 们 把 src/app/todo/todo-item.component.ts 改 成 下 面 的 样子 : 


import { Component 


Input, Output, EventEmitter } from 'Gangular/core'; 


~ 


GComponent ({ 
selector: 'app-todo-item', 
templateUrl: './todo-item.component.html', 
styleUrls: ['./todo-item.component.css'] 


)) 
export class TodoltemComponent( 

QGInput() isChecked: boolean = false; 
QGInput() todoDesc: string = ''; 
GOutput() onToggleTriggered = n 
QGOutput() onRemoveTriggered = n 


EventEmitter«boolean»|(); 
EventEmitter«boolean»|(); 


€ 


toggle() { 
this.onToggleTriggered.emit (true); 
} 


remove() { 
this.onRemoveTriggered.emit (true); 
} 
} 


建立 好 Todoltem 后 ， 我 们 再 来 看 TodoList， 还 是 从 模板 看 一 下 : 


<section class-"main" *ngIf-"todos?.length > 0"> 
«input class-"toggle-all" type-"checkbox"» 
«ul class-"todo-list"» 
«li *ngFor-"let todo of todos" [class.completed]-"todo.completed"» 
«app-todo-item 
[isChecked]-"todo.completed" 
(onToggleTriggered)-"onToggleTriggered (todo)" 
(onRemoveTriggered)-"onRemoveTriggered (todo)" 
[todoDesc]-"todo.desc"» 
«/app-todo-item» 
</li> 
</ul> 
</section> 


TodoList 需 要 一 个 输入 型 参数 todos， 由 父 组 件 (TodoComponent) 指定 ，TodoList 本 身 不 需要 知道 这 个 数组 是 怎么 来 的 ， 它 和 Todoltem 只 是 负责 显示 而 已 。 当 然 我 们 由 于 在 TodoList 里 面 还 有 
TodolTem 子 组 件 ， 而 且 TodoList 本 身 不 会 处 理 这 个 输出 型 参数 ， 所 以 我 们 需要 把 子 组 件 的 输出 型 参数 再 传递 给 TodoComponent 进 行 处 理 : 


impor! 
impor! 


( Component, Input, Output, EventEmitter ) from 'Gangular/core'; 
( Todo } from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/../todo.model'; 


GComponent ({ 

selector: 'app-todo-list', 

templateUrl: './todo-list.component.html', 
styleUrls: ['./todo-list.component.css'] 


)) 


export class TodoListComponent { 


e Eodosi Todo[l = []; 
Q Input () 
set todos (todos: Todo[]) Í 
this. todos = [http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/106136/OEBPS/Text/...todos]; 


get todos() { 
return this. todos; 


GOutput() onRemoveTodo = new EventEmitter«Todo»(); 
GOutput() onToggleTodo = new EventEmitter«Todo»(); 


onRemoveTriggered(todo: Todo) { 
this.onRemoveTodo.emit (todo); 


onToggleTriggered(todo: Todo) { 
this.onToggleTodo.emit (todo); 
} 
} 


上 面 代码 中 有 一 个 新 东西 ， 就 是 在 todos() 方 法 前 我 们 看 到 有 set 和 get 两 个 访问 修饰 符 。 这 个 是 由 于 我 们 如 果 把 todos 当 成 一 个 成 员 变量 给 出 的 话 ， 在 设置 后 如 果 父 组 件 的 todos 数 组 改变 了 ， 子 组 件 并 不 
知道 这 个 变化 ， 从 而 不 能 更 新 子 组 件 本 身 的 内 容 。 所 以 我 们 把 todos 做 成 了 方法 ， 而 且 通 过 get 和 set 修 饰 成 属性 方法 ， 也 就 是 说 从 模板 中 引用 的 话 可 以 写成 {todosj}。 


过 标记 set todos0 为 @Input 我 们 可 以 监视 父 组 件 的 数据 变化 。 也 就 是 说 如 果 只 定义 一 个 输入 型 属性 的 话 ， 那 么 这 个 属性 是 “只 写 ” 的 ， 如 果 要 检测 父 组 件 所 设置 值 的 变化 ， 我 们 需要 读 ， 所 以 要 提供 
读 和 写 两 个 方法 。 


现在 回 过 头 来 看 一 下 todo.component.html， 我 们 看 到 (onRemoveTodo) -'removeTodo ($event) "， 这 句 是 为 了 处 理子 组 件 (TodoList) 的 输出 型 参数 (onRemoveTodo) ， 而 $event 其 实 就 
是 这 个 事件 反射 器 携带 的 参数 (这 里 是 todo:Todo) 。 我 们 通过 这 种 机 制 完成 组 件 间 的 数据 交换 : 


<section class="todoapp"> 

«app-todo-header 
placeholder-"What do you want" 
(textChanges) -"onTextChanges (Sevent) " 
(onEnterUp)-"addTodo()" > 

«/app-todo-header» 

«app-todo-list 
[todos]-" todos" 
(onRemoveTodo) 2" removeTodo (Sevent) " 
(onToggleTodo) 7»"toggleTodo (Sevent)" 
> 


— 


— 


«/app-todo-list» 
«app-todo-footer [itemCount]-"todos?.length"»«/app-todo-footer» 
«/section» 


讲 到 这 里 大 家 可 能 要 问 是 不 是 过 度 设计 了 ， 这 人 么 少 的 功能 用 得 着 这 么 设计 吗 ? 是 的 ， 本 案例 属于 过 度 设计 ， 但 我 们 的 目的 是 展示 出 更 多 的 Angular 实 战 方法 和 特性 。 


4.5 填 坑 ， 完 成 漏 挥 的 功能 


现在 我 们 还 差 几 个 功能 : 全 部 反 转 状态 (ToggleAll) ， 清 除 全 部 已 完成 任务 (Clear Completed) 和 状态 筛选 器 。 我 们 的 设计 方针 是 逻辑 功能 放 在 TodoComponent 中 ， 而 其 他 子 组 件 只 负责 表现 。 这 
样 的 话 ， 我 们 先 来 看 看 逻辑 上 应 该 怎么 完成 。 


46 小 练习 


1. 如 果 不 使 用 路 由 参数 来 实现 过 滤器 功能 (All, Active, Completed) 的 话 ， 还 有 哪些 实现 方式 ? 你 可 以 自己 动手 试验 一 下 。 


2. 利 用 json-server 我 们 可 以 很 快 搭 建 一 个 Web AP1， 如 果 现 在 需要 有 一 个 用 户 系统 ， 你 可 以 搭建 一 套用 户 的 API 吗 ? 


第 5 草 ”多 用 户 版 本 应 用 


随 着 需求 的 演化 ， 往 往 我 们 会 进入 到 一 个 恶性 循环 : 产品 经 理 提出 需求 一 程序 员 编 码 实现 一 产品 经 理 觉 得 需求 需要 改动 一 程序 员 重新 来 过 。 这 样 周而复始 ， 很 多 程序 猿 抱怨 产品 经 理 为 什么 不 能 固化 需 
求 ， 但 现实 就 是 这 样 ， 需 求 总 是 在 变化 的 ， 我 们 需要 适应 需求 的 变化 。 个 人 以 为 最 好 的 适应 方式 就 是 快速 开发 一 个 原型 ， 然 后 试 试看 ， 让 实际 的 用 户 需求 和 数据 来 驱动 我 们 的 开发 。 


本 章 我 们 会 给 我 们 的 待 办 事项 应 用 增加 一 个 需求 ， 然 后 我 们 看 看 怎么 来 快速 构建 原型 。 以 及 如 何 使 用 VSCode 进 行 Debug (竟然 现在 才 提 到 ! ) 。 


5.1 ”数据 驱动 开 友 


第 4 章 我 们 完成 的 Todo 的 基本 功能 看 起 来 还 不 错 ， 但 是 有 个 大 问题 ， 就 是 每 个 用 户 看 到 的 都 是 一 样 的 待 办 事项 ， 我 们 希望 每 个 用 户 都 拥有 自己 的 待 办 事项 列表 。 


我 们 来 分 析 一 下 怎么 做 ， 如 果 每 个 todo 对 象 带 一 个 Userld 属 性 是 不 是 可 以 解决 呢 ? 好 像 可 以 ， 逻 辑 大 概 是 这 样 : 用 户 登 录 后 转 到 /todo，TodoComponent 得 到 当前 用 户 的 Userld， 然 后 调用 
TodoService 中 的 方法 ， 传 入 当前 用 户 的 Userld，TodoService 中 按 Userld 去 筛选 当前 用 户 的 Todos。 


但 可 惜 我 们 目前 的 LoginComponent 还 是 个 实验 品 ， 很 多 功能 的 缺失 ， 我 们 是 先 去 做 Login 呢 ， 还 是 利用 现 有 的 Todo 对 象 先 试 验 一 下 呢 ? 我 个 人 的 习惯 是 先进 行 试验 。 


按 之 前 我 们 分 析 的 ， 给 todo 加 一 个 userld 属 性 ， 我 们 手动 给 我 们 目前 的 数据 加 上 userld 属 性 吧 。 更 改 todo\todo-data.json 为 下 面 的 样子 : 


"id": "pf75769b-4810-64e9-d154-418ff2dbf55e", 
"desc": "getting up", 

"completed": false, 

"userId": 1 


"id": "5894a12f-dael-5ab0-5761-1371ba4f703e", 


"desc": "have breakfast", 
"completed": true, 
"userId": 2 


"id": "0d2596c4-216b-df3d-1608-633899c5a549" 


~ 


"desc": "go to school", 
"completed": true, 
"userId": ] 


"id": "Obl1f6614-1def-3346-f070-d6839c02d6Dp7", 


"id": "cle02a43-6364-5515-1652-a772f0fab7b3", 
"desc": "This is a te", 

"completed": false, 

"userId": 1 


如 果 你 还 没有 启动 json-server 的 话 ， 让 我 们 启动 它 :json-server./src/app/todo/todo-data.json， 然 后 打开 浏览 器 在 地 址 栏 输入 http://localhost:3000/todos/?userld=2 你 会 看 到 只 有 userld=2 的 json 
被 输出 了 : 


"id": "5894a12f-dael-5ab0-5761-1371ba4f703e", 
"desc": "have breakfast", 

"completed": true, 

"userId": 2 


"id": "Obl1f6614-1def-3346-f070-d6839c02d6p7", 
"desc": "test", 
"completed": false, 
"userId": 2 


兴趣 的 话 可 以 再 试 试 http://localhost:3000/todos/?userld=2&completed=false 或 其 他 组 合 查 询 。 现 在 todo 有 了 userld 字 段 ， 但 我 们 还 没有 User 对 象 ，User 的 json 表 现形 式 看 起 来 应 该 是 这 样 : 


"igs 1y 

"username": "wang", 

"password": "1234" 
} 


当然 这 个 表现 形式 有 很 多 问题 ， 比 如 密码 是 明文 的 ， 这 些 问 题 我 们 先 不 管 ， 但 大 概 样子 是 类 似 的 。 那 么 现在 如 果 要 建立 User 数 据 库 的 话 ， 我 们 应 该 新 建 一 个 user-data.json: 


{ 
"users": [ 
{ 
"ia"; 1; 
"username": "wang", 
"password": "1234" 


vidte- 2, 
"username": "peng", 
"password": "5678" 


但 这 样 做 的 话 感觉 单独 为 其 建 一 个 文件 有 点 儿 不 值得 ， 我 们 干脆 把 user 和 todo 数 据 都 放 在 一 个 文件 吧 ， 现 在 删除 /src/app/todo/todo-data.json， 在 src\app 下 面 新 建 一 个 data.json: 


"todos": [ 
{ 
"id": "bf75769b-4810-64e9-d154-418ff2dbf55e", 
"desc": "getting up", 
"completed": false, 
"userId": 1 


"id": "5894a12f-dael-5ab0-5761-1371ba4f703e", 
"desc": "have breakfast", 

"completed": true, 

"userId": 2 


"id": "0d2596c4-216b-df3d-1608-633899c5a549", 


"desc": "go to school", 
"completed": true, 
"userId": 1 


"id": "Obl1f6614-1def-3346-f070-d6839c02d6p7", 
"desc": "test", 
"completed": false, 
"userId": 2 


"id": "c1e02a43-6364-5515-1652-a772f0fab7b3", 
"desc": "This is a te", 

"completed": false, 

"userId": 1 


} 
l; 


"users": 
{ 
"id": 1, 
"username": "wang", 


"password": "1234" 


vids 2; 
"username": "peng", 
"password": "5678" 


当然 ， 有 了 数据 我 们 就 得 有 对 应 的 对 象 ， 基 于 同样 的 理由 ， 我 们 把 所 有 的 entity 对 象 都 放 在 一 个 文件 : 删除 src\appNtodoNtodo.model.ts， 在 srcC\app 下 新 建 一 个 目录 domain， 然 后 在 domain 下 新 建 
一 个 entities.ts， 请 别 志 了 更 新 所 有 的 引用 : 


export class Todo { 
id: string; 
desc: string; 
completed: boolean; 
userId: number; 

} 

export class User { 
id: number; 
username: string; 
password: string; 


} 


对 于 TodoService 来 说 ， 我 们 可 以 做 的 就 是 按照 刚才 的 逻辑 进行 改写 : 删除 和 切换 状态 的 逻辑 不 用 改 ， 因 为 是 用 Todo 的 ID 标识 的 。 其 他 的 要 在 访问 的 URL 中 加 入 userld 的 参数 。 添 加 用 户 的 时 候 要 把 
Userld 传 入 : 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
addTodo (desc:string): Promise«Todo» { 
let todo = ( 
id: UUID.UUID(), 
desc: desc, 
completed: false, 
userId: this.userlId 


}; 

return this.http 

.post (this.api url, JSON.stringify(todo), {headers: this.headers]) 
.toPromise () 

.then (res => res.json() as Todo) 

.catch (this.handleError); 


getTodos(): Promise<Todo[]>{ 
return this.http.get('S[this.api url)?userId-$[this.userId]') 
.toPromise () 
.then (res => res.json() as Todo[]) 
.catch (this.handleError); 


} 
filterTodos (filter: string): Promise«Todo[]» { 
switch (filter) { 
case 'ACTIVE': return this.http 
.get('$[this.api url)?completed-false&userId-$[(this.userId)') 
.toPromise () 
.then (res => res.json() as Todo[]) 
.catch (this.handleError); 
case 'COMPLETED': return this.http 
.get('$[this.api url)?completed-true&userId-$(this.userId]') 
.toPromise () 
.then (res => res.json() as Todo[]) 
.catch (this.handleError); 
default: 
return this.getTodos(); 


) 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 


5.2 ”验证 用 户 账 户 的 流程 


我 们 来 梳理 一 下 用 户 验 证 的 流程 : 

1) 存储 要 访问 的 URL。 

2) 根据 本 地 的 已 登录 标识 判断 是 否 此 用 户 已 经 登录 ， 如 果 已 登录 就 直接 放行 。 

3) 如 果 未 登录 ， 导 航 到 登录 页 面 让 用 户 填 写 用 户 名 和 密码 进行 登录 。 

4) 系统 根据 用 户 名 查找 用 户 表 中 是 否 存在 此 用 户 ， 如 果 不 存在 此 用 户 ， 返 回 错误 。 
5) 如 果 存 在 此 用 户 ， 对 比 填写 的 密码 和 存储 的 密码 是 否 一 致 ， 如 果 不 一 致 ， 返 回 错误 。 
6) 如 果 一 致 ， 存 储 此 用 户 的 已 登录 标识 到 本 地 。 

7) 导航 到 原本 要 访问 的 URL 即 第 一 步 中 人 存储 的 URL， 删 掉 本 地 存储 的 URL。 
看 上 去 我 们 需要 实现 : 

“ UserService: 用 于 通过 用 户 名 查找 用 户 并 返回 用 户 。 

: AuthService: 用 于 认证 用 户 ， 其 中 需要 利用 UserService 的 方法 。 


: AuthGuard: 路 由 拦截 器 ， 用 于 拦截 到 路 由 后 通过 AuthService 来 知道 此 用 户 是 否 有 权限 访问 该 路 由 ， 根 据 结果 导航 到 不 同 路 径 。 看 到 这 里 ， 你 可 能 有 些 疑 问 ， 为 什么 我 们 不 把 UserService 和 AuthService 
合并 呢 ? 这 是 因为 UserService 是 用 于 对 用 户 的 操作 的 ， 不 光 认 证 流程 需要 用 到 它 ， 我 们 未 来 要 实现 的 一 系列 功能 都 要 用 到 它 ， 比 如 注册 用 户 ， 后 台 用 户 管理 ， 以 及 主页 要 显示 用 户 名 称 等 。 


5.3 ”路 由 模块 化 


Angular 团 队 推 荐 把 路 由 模块 化 ， 这 样 便于 使 业务 逻辑 和 路 由 松 耦 合 。 虽 然 暂 时 在 我 们 的 应 用 中 感觉 用 处 不 大 ， 但 按 官方 推荐 的 方式 还 是 和 大 家 一 起 改造 一 下 吧 。 删 掉 原 有 的 app.routes.ts 和 


todo.routes.ts， 添 加 app-routing.module.ts: 


import { NgModule ) from 'Gangular/core'; 
import { Routes, RouterModule } from 'Gangular/router'; 
import ( LoginComponent ) from './login/login.component'; 


const routes: Routes - [ 
{ 
path: '', 
redirectTo: 'login', 
pathMatch: 'full' 


), 
{ 


path: 'login', 

component: LoginComponent 
}, 
{ 

path: 'todo', 

redirectTo: 'todo/ALL' 
} 


]; 
&NgModule ({ 

imports: [ 
RouterModule.forRoot (routes) 


l, 
exports: [ 
RouterModule 


] 
)) 
export class AppRoutingModule {} 


VA srevappNxtodoNtodo-routing.module.ts: 


import { NgModule } from 'Gangular/core'; 
import { Routes, RouterModule ) from 'Gangular/router'; 
import { TodoComponent ) from './todo.component'; 


import ( AuthGuardService ) from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/../core/auth-guard.service'; 


const routes: Routes - [ 


{ 


path: 'todo/:filter', 
canActivate: [AuthGuardService], 
component: TodoComponent 


]; 


&NgModule (1 
imports: [ RouterModule.forChild(routes) ], 
exports: [ RouterModule | 
)) 
export class TodoRoutingModule { } 


并 分 别 在 AppModule 和 TodoModule 中 引入 路 由 模块 。 


54 路 由 的 惰性 加 载 一 一 寞 步 路 由 


在 需求 和 功能 不 断 添加 和 修改 之 后 ， 应 用 的 尺寸 将 会 变 得 更 大 。 在 某 一 个 时 间 点 ， 我 们 将 达到 一 个 顶点， 应 用 将 会 需要 过 多 的 时 间 来 加 载 。 这 会 带 来 一 定 的 性 能 问题 。 
如 何 才 能 解决 这 个 问题 呢 ?Angular 2 引进 了 异步 路 由 ， 我 们 可 以 惰性 加 载 指定 的 模块 或 组 件 。 这 样 给 我 们 带 来 了 下 列 好 处 : 

. 可 以 继续 开发 我 们 的 新 功能 ， 但 不 再 增加 初始 加 载 文件 的 大 小 。 

. 只 有 在 用 户 请 求 时 才 加 载 特 征 区 。 

: 为 那些 只 访问 应 用 程序 某 些 区 域 的 用 户 加 快 加 载 速度 。 


还 是 我 们 一 起 打造 一 个 例子 说 明 一 下 ， 之 后 大 家 就 可 以 清楚 地 理解 这 个 概念 了 。 我 们 新 建 一 个 叫 Playground 的 module。 打 开 一 个 命令 行 窗口 ,输入 ng g m playgorund， 这 样 Angular CLI 非 常 聪明 
的 帮 我 们 建立 了 PlaygroundModule， 不 光 如 此 ， 它 还 帮 我 们 建立 了 一 个 PlaygroundComponent。 因 为 一 般 来 说 ， 我 们 新 建 一 个 模块 肯定 会 至 少 有 一 个 组 件 的 。 


由 于 要 做 惰性 加 载 ， 我 们 并 不 需要 在 根 模块 AppModule 中 引入 这 个 模块 ， 所 以 我 们 检查 一 下 根 模 块 src/app/app.module.ts 中 是 否 引 入 了 PlaygroundModule， 如 果 有 ， 请 去 掉 。 


首先 为 PlaygroundModule 建 立 自己 模块 的 路 由 ， 我 们 如 果 遵守 Google 的 代码 风格 建议 的 话 ， 那 么 就 应 该 为 每 个 模块 建立 独立 的 路 由 文件 。 


const routes: Routes = [ 
( path: '', component: PlaygroundComponent }, 


]; 


&NgModule (1 
imports: [ RouterModule.forChild(routes) ], 
exports: [ RouterModule ], 


)) 


export class PlaygroundRoutingModule ( } 


在 rc/app/app-routing.module.ts 中 我 们 要 添加 一 个 惰性 路 由 指向 PlaygroundModule 


import { NgModule } from 'Gangular/core'; 

import { Routes, RouterModule } from 'Gangular/router'; 
import { LoginComponent ) from './login/login.component'; 
import { AuthGuardService } from './core/auth-guard.service'; 
const routes: Routes - [ 


{ 
path: '', 
redirectTo: 'login', 
pathMatch: 'full' 


, 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 


path: 'playground', 
loadChildren: 'app/playground/playground.modulefPlaygroundModule!, 
) 
1; 


&NgModule (1 
imports: [ 
RouterModule.forRoot (routes) 


l, 
exports: [ 
RouterModule 


] 
n 
export class AppRoutingModule {} 


在 这 段 代 码 中 我 们 看 到 一 个 新 面孔 ，loadChildren。 路 由 器 用 loadChildren 属 性 来 映射 我 们 希望 惰性 加 载 的 模块 文件 ， 这 里 是 PlaygroundModule。 路 由 器 将 接收 我 们 的 loadChildren 字 符 串 ， 并 把 它 
动态 加 载 进 PlaygroundModule， 它 的 路 由 被 动态 合并 到 我 们 的 配置 中 ， 然 后 加 载 所 请 求 的 路 由 。 但 只 有 在 首次 加 载 该 路 由 时 才 会 这 样 做 ， 后 续 的 请 求 都 会 立即 完成 。 


app/playground/playground.module#PlaygroundModule 这 个 表达 式 是 这 样 的 规则 : 模块 的 路 径 # 模 块 名 称 。 


现在 我 们 回顾 一 下 ， 在 应 用 启动 时 ， 我 们 并 没有 加 载 PlaygroundModule， 因 为 在 AppModule 中 没有 它 的 引用 。 但 是 当 你 在 浏览 器 中 手动 输入 http://localhost:4200/playground 时 ， 系 统 在 此 时 加 载 
PlaygroundModule, 


5.5 子路 由 


程序 复杂 了 之 后 ， 一 层 的 路 由 可 能 就 不 够 用 了 ， 在 一 个 模块 内 部 由 于 功能 较 复 杂 ， 需 要 再 划分 出 二 级 甚至 更 多 级 别 的 路 径 。 这 种 情况 下 我 们 就 需要 Angular 2 提供 的 一 个 内 建功 能 ， 叫 做 子路 由 。 


我 们 向 来 认为 例子 是 最 好 的 说 明 ， 所 以 还 是 来 做 一 个 小 功能 : 现在 我 们 需要 对 一 个 叫 playground 的 路 径 下 添加 子路 由 ， 子 路 由 有 两 个 : one 和 two。 其 中 one 下 面 还 有 一 层 路 径 叫 three。 形 象 的 表示 一 
下 ， 就 像 下 面 的 结构 一 样 : 


/playground--- | 
| /one 


那么 我 们 还 是 先 在 项 目 目录 输入 ng g c playground/one， 然 后 再 执行 ng g c playground/two， 还 有 一 个 three， 所 以 再 来 : nggcplayground/three, 


现在 我 们 有 了 三 个 组 件 ， 看 看 怎么 处 理 路 由 吧 ， 原 有 的 模块 路 由 文件 如 下 : 


( NgModule } from 'Gangular/core'; 
( Routes, RouterModule } from 'Gangular/router'; 


impor! 
impor! 


from './playground.component'; 


import ( PlaygroundComponent ] 
const routes: Routes - [ 


path: '', 
component: PlaygroundComponent 
), 
1; 


aNgModule ( 
imports: 
exports: 


ra 


RouterModule.forChild(routes) ], 
RouterModule ], 


r— 


export class PlaygroundRoutingModule ( } 


我 们 首先 需要 在 模块 的 根 路 由 下 添加 one 和 two，Angular 2 在 路 由 定义 数组 中 对 于 每 个 路 由 定义 对 象 都 有 一 个 属性 叫做 children， 这 里 就 是 指定 子路 由 的 地 方 了 。 所 以 在 下 面 代 码 中 我 们 把 one 和 two 
都 放 入 了 children 数 组 中 。 


import { NgModule } from 'Gangular/core'; 

import { Routes, RouterModule } from 'Gangular/router'; 
import { PlaygroundComponent } from './playground.component'; 
import { OneComponent ) from './one/one.component'; 

import { TwoComponent ) from './two/two.component'; 


const routes: Routes = [ 


path: '', 
component: PlaygroundaComponent, 
children: [ 
{ 
path: 'one', 


component: OneComponent, 
}, 
{ 

path: 'two', 

component: TwoComponent 


} 


), 
]5 


GNgModule ( ( 
imports: [ RouterModule.forChild(routes) ], 
exports: RouterModule ], 

}) 


export class PlaygroundRoutingModule { } 


m 


这 只 是 定义 了 路 由 数据 ， 我 们 还 需要 在 某 个 地 方 显示 路 由 指向 的 组 件 ， 那 么 这 里 面 我 们 还 是 在 PlaygroundComponent 的 模板 中 把 路 由 插座 放 入 吧 。 


«ul» 
<li><a routerLink-"one"»One«/a»«/li» 
<li><a routerLink-"two"»Two«/a»«/li» 
«/ul» 


«router-outlet»«/router-outlet» 


现在 我 们 试验 一 下 ， 打 开 浏 览 器 输入 http://localhost:4200/playground ( 见 图 5.4) 我 们 看 到 两 个 链接 ， 你 可 以 分 别 点 一 下 ， 观 察 地 址 栏 。 应 该 可 以 看 到 ， 点 击 one 时 ， 地 址 变 
成 http://localhost:4200/playground/one 在 我 们 放置 路 由 插座 的 位 置 也 会 出 现 one works。 当 然 点 击 two 时 也 会 有 对 应 的 改变 。 这 说 明 我 们 的 子路 由 配置 好 用 了 ! 


Awesome Todos 


图 5.4 子路 由 的 小 例子 


当然 有 的 时 候 还 需要 更 深层 级 的 子路 由 ， 其 实 也 很 简单 。 就 是 重复 我 们 刚才 做 的 就 好 ， 只 不 过 要 在 对 应 的 子路 由 节点 上 。 下 面 我 们 还 是 演练 一 下 ， 在 点 击 one 之 后 我 们 希望 到 达 一 个 有 子路 由 的 页 面 
(也 就 是 子路 由 的 子路 由 ) 。 于 是 我 们 在 OneComponent 节 点 下 又 加 了 children， 然 后 把 ThreeComponent 和 对 应 的 路 径 写 入 


import { NgModule } from 'Gangular/core'; 

import { Routes, RouterModule ) from 'Gangular/router'; 
import ( PlaygroundComponent } from './playground.component'; 
import { OneComponent ) from './one/one.component'; 

import { TwoComponent ) from './two/two.component'; 

import ( ThreeComponent } from './three/three.component'; 


const routes: Routes = [ 
{ 
path: '', 
component: PlaygroundaComponent, 
children: [ 
{ 
path: 'one', 
component: OneComponent, 
children: [ 
{ 
path: 'three', 
component: ThreeComponent 


path: 'two', 
component: TwoComponent 
} 
] 
}, 
1; 


aNgModule ( ( 
imports: [ RouterModule.forChild(routes) ], 
exports: [ RouterModule ], 


)) 
export class PlaygroundRoutingModule ( } 


当然 ， 还 是 一 样 ， 我 们 需要 改造 一 下 OneComponent 的 模板 以 便于 它 可 以 显示 子路 由 的 内 容 。 改 动 src/app/playground/one/one.component.htm| 为 如 下 内 容 。 


<p> 
one works! 
</p> 
<ul> 
<li><a routerLink="three">Three</a></li> 


</ul> 
<router-outlet></router-outlet> 


这 回 我 们 看 到 如 果 在 浏览 器 中 输入 http://localhost:4200/playground/one/three 会 看 到 如 图 5.5 所 示 的 结果 。 


P > OC (0 © localhost:4200/playground/one/three 
iU RIH) K Bookmarks € Apple _? Google Maps &3 YouTube \W Wikipedia 国 Popular 国 数 据 源 国 云 服务 C3 技术 学 习 
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图 5.5 更 多 层级 的 子路 由 


经 过 这 个 小 练习 ， 相 信和 上 再 复杂 的 路 由 你 也 可 以 搞定 了 。 但 是 我 要 说 一 句 ， 个 人 不 是 很 推荐 过 于 复杂 的 路 由 (这 里 指 层级 找 套 太 多 ) 。 层 级 多 了 之 后 意味 着 这 个 模块 太 大 了 ， 负 责 了 过 多 它 不 应 该 负责 的 
事情 。 也 就 是 说 当 要 使 用 子路 由 时 ， 一 定 多 问 自己 几 遍 ， 这 样 做 是 必须 的 吗 ” 可 以 用 别 的 方式 解决 吗 ” 是 不 是 我 的 模块 改 拆 分 了 ? 


5.6 ”用 VSCode 进 行 调试 


我 们 一 直 都 没 讲 如 何 用 VSCode 进 行 debug， 这 章 我 们 来 介绍 一 下 。 首 先 需 要 安装 一 个 vscode 插 件 ， 点 击 左 侧 最 下 面 的 图 标 或 者 在 查看 菜单 中 选择 “命令 面板 ”,， 输入 install， 选 择 “ 扩 展 : 安装 扩 
展 ”， 然 后 输入 “debugger for chrome” 回 车 ， 点 击 “ 安 装 ” 即 可 ， 参 见 图 5.6。 


然后 点 击 最 左边 的 倒数 第 二 个 按钮 ， 参 见 图 5.7。 


扩展 todo.service.ts FA: Debugger for Chrome x 


debugger for chrome Debu A Ch . 
Debugger for Chrome 241 756K gger tor rome  msisdiag.debugger-for-chrom 


Debug your JavaScript code in the C... Microsoft | 4» 756840 | * o * | 许可 证 


Microsoft 


lirongfei-open-chrome 0.02 — 4157 Debug your JavaScript code in the Chrome browser, or any other tar... 


lirongfeit23 ! WB Wu 


Dark Chrome DevTools 0.0.1 — $4K 
Dark Theme like Chrome DevTools (i.. 详细 信息 ”发布 内 容 ERAS 依赖 项 


Ivan Zusko 


OpenSwift Debugger 0.1.8 $272 
Starter extension for developing deb... 


bin70 


图 5.6 VSCode Chtome 调 试 插件 


调试 b  LaunchChromeagainstiocai? $ Œ /aunchjson x 


二 
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图 5.7 debug profile] z£ 


如 果 是 第 一 次 使 用 的 话 ， 齿 轮 图 标 上 会 有 个 红 点 ， 点 击 选 择 debugger for chrome，VSCode 会 帮 你 创建 一 个 配置 文件 ， 这 个 文件 位 于 \.vscodeNlaunch.json， 是 debugger 的 配置 文件 ， 请 改写 成 下 面 
的 样子 。 


全 注意 “如 采 是 MacOSX 或 者 Linux， 请 把 userDataDit 蔡 换 成 对 应 的 临时 目录 ， 另 外 把 webpack:///C*%"C:/*" 莹 搞 成 "webpack:///*""/*"， 这 身 是 因为 angular-cli 采 用 webpack 打 包 ， 如 果 没有 使 用 angnlar 
ci， 不 需要 添加 这 和 句 。 


{ 
"version": "0.2.0", 
"configurations": [ 
{ 
"name": "Launch Chrome against localhost, with sourcemaps", 
"Lype": "chrome", 
"request": "launch", 
"url": "http://localhost:4200", 
"sourceMaps": true, 
"runtimeArgs": [ 
"—-disable-session-crashed-bubble", 
"—-disable-infobars" 


l, 
"diagnosticLogging": true, 
"webRoot": "$(workspaceRoot])/src", 
//windows setup 
"userDataDir": "C:\\temp\\chromeDummyDir", 
"sourceMapPathOverrides": ( 
"webpack:///C:*":;"C:;/*" 
//luse "webpack:///*": "/*" on Linux/OSX 
} 


"name": "Attach to Chrome, with sourcemaps", 
"type": "chrome", 

"request": "attach", 

"port"; 9222, 


"sourceMaps": true, 
"diagnosticLogging": true, 
"webRoot": "$(workspaceRoot)/src", 
"sourceMapPathOverrides": ( 
"webpack:///C:*":;"C:;/*" 
} 


现在 你 可 以 试 着 在 源码 中 设置 一 个 断 点 ， 点 击 debug 视 图 中 的 debug 按 钮 ， 可 以 尝试 右键 点 击 变 量 把 它 放 到 监视 器 中 ， 看 看 变量 值 或 者 逐步 调试 应 用 ， 参 见 图 5.8。 


在 笔者 写 书 的 时 间 点 ， 由 于 一 些 问题 (可 能 是 zone.js 引 起 的 异常 ， 启 动 VSCode debug 时 可 能 会 自动 进入 一 个 断 点 ， 如 图 5.9 所 示 ， 只 要 点 击 继续 束 可 以 了 ， 并 不 影响 调试 。 


调试 b Launch Chrome againstiocalt? $ Œ 
4 变量 
4 Local 

P this: AppComponent 

b „this: AppComponent (service: AuthService,.. 
» Closure 
» Global 


4 调用 堆栈 已 于 BREAKPOINT 暂停 


Wrapper AppComponent . ngDoCheck 

View AppComponent. HostQ . detectChangesInter... 
AppView.detectChanges view.js 288 
DebugAppVi ew. detectChanges view.js 381 
ViewRef...detectChanges view ref.js 130 
Canonymous function) application ref.js 437 


Bossa S d mm E T n. a E ul. ———PÓP emhlnm ssf lu  -— 


All Exceptions 
© Uncaught Exceptions 
(B app.component.ts src/app 


调试 b Launch Chrome against localt $ 49 四 
4 变量 a 


4 Local | 
this: undefined 
b symbol .: function . symbol. (nome) { . } 
-currentTask: null 
b .currentZone: Zone { properties: Object, .. 
-isDrainingMicrotaskQueue: "false" 


> microTaskQueue: Array[9] O 
.numberOfNestedTaskFrames: 0 


LI sm momo md hmmm omnl m mm. ra rn 


4 监视 


launch.json ib ^" i$ tf OO ac à 


10 export class Appcomponent implements OnInit 1 
11 auth: Auth; 


12 title - 'Awesome Todos'; 
13 constructor(OGInject('auth') private service, priv 
14 ) 
15 ngOnInit() 1 
16 this.service 
17 .getAuth() 
18 .Subscribe(auth => this.auth = Object.assign(1 
19 } 

login() { 

this.router.navigate( ['login']); 


mh 
调试 控制 台 关 v 


 ————————————————————————————— 
file under webRoot: /Users/wangpeng/workspace/awesome -tutorials/angular2/ng2-tut/src. I 
t may be external or served directly from the server's memory (and that's OK). 
Paths.scriptParsed: could not resolve /LoginModule/RegisterDialogComponent/host .ngfactor 
y.js to a file under webRoot: /Users/wangpeng/workspace/awesome -tutorials/angular2/ng2-t 
ut/src. It may be external or served directly from the server's memory (and that's OK). 


Paths.scriptParsed: could not resolve /TodoModule/TodoComponent/host.ngfactory.js to a f 
ile under webRoot: /Users/wangpeng/workspace/awesome-tutorials/angular2/ng2-tut/src. It 
may be external or served directly from the server's memory (and that's OK). 
Paths.scriptParsed: could not resolve /AppModule/AppComponent/host.ngfactory.js to a fil 
e under webRoot: /Users/wangpeng/workspace/awesome-tutorials/angular2/ng2-tut/src. It ma 
y be external or served directly from the server's memory (and that's OK). 
Paths.scriptParsed: could not resolve /AppModule/module.ngfactory.js to a file under web 
Root: /Users/wangpeng/workspace/awesome -tutorials/angular2/ng2-tut/src. It may be extern 
al or served directly from the server's memory (and that's OK). 


图 5.8 在 VSCode 中 Debug 


launch.json In» me 人 D m 
92295 ^if WativePromise) 1 
92296 patchThen(NativePromise); 
92297 if (typeof global['fetch'] !== 'undefined' 
92298 var fetchPromise = void 0; 
92299 try 1 
92300 // In MS Edge this throws 


o 92301 fetchPromise = global['fetch'](); 


92302 ) 

92303 catch (e) 1 

92304 // In Chrome this throws instead. 
92305 fetchPromise = global['fetch']('abx« 
92306 


图 5.9 可 能 由 于 Angulat 的 zone.js 引 起 的 异常 


本 章 代 码 : https://github.com/wpcfan/awesome-tutotials/tree/chap05 /angular2 /ng2-tut 


打开 命令 行 工 具 使 用 git clone https:/ /github.com/wpcfan/awesome-tutorials 载 。 然 后 键入 git checkout chap05 切 换 到 本 章 代 码 。 


57 “小 练习 


1. 试 着 把 Todo 也 变 成 懈 性 加 载 的 形式 该 怎么 做 ? 自己 动手 试 试 看 。 


2. 在 Chrome 的 开发 者 工具 的 Network 监 视 器 看 看 加 载 元 素 和 它们 被 加 载 的 速度 ， 觉 得 还 有 哪些 性 能 瓶颈 ”如 图 5.10 所 示 。 


(x ú] | Elements Console Sources Network Timeline Profiles » |? X 


© O m y | View: E = | 门 Preservelog C Disable cache | C Offline No thro 


15000ms 


Name | Size Ti... Timeline - Start Timea | 


a | 一 一 一 一 一 一 一 一 + 一 一 


1adf85e22b.jpg 0 p/L.. (fr... i 
[ ] cr?1G-683C71EBFO... 
| ] 2012101812132190... 
同 2012101812132190... 
门 cr?1G-683C71EBF9... 


E] 
* 
LJ 


E 
ü 
E 


| | cr?IG-683C71EBF39... 

| | cr?1G-683C71EBF9... 
05XU41R68BOR.jpg 
QUVF84213B66.jpg 

11 requests | 1.9KB transferred 


"7*9*55095 575 


图 5.10” Chrome 开发 者 工具 的 网 络 监视 器 


3. 在 程序 中 找 几 个 你 感 兴趣 的 位 置 ， 设 置 断 点 ， 用 VSCode 调 试 一 下 ， 看 看 程序 不 同位 置 的 变量 值 是 什么 。 


第 6 章 ”使 用 第 三 万 样式 库 及 模块 优化 


上 一 章 讲 了 模块 的 概念 ， 本 章 我 们 要 看 一 下 有 哪些 官方 推荐 的 关于 模块 的 最 佳 实践 ， 根 据 这 些 方法 我 们 一 起 来 优化 模块 。 
一 直 我 们 使 用 的 都 是 开发 环境 ， 但 产品 上 线 怎 么 办 呢 ?”Angular CLI 就 是 为 了 简化 大 家 的 流程 而 设计 的 ， 当 然 会 考虑 发 布 到 生产 环境 这 个 环节 ， 这 一 章 我 们 来 试 一 下 。 
很 多 时 候 我 们 会 引入 第 三 方 的 样式 库 ， 接 下 来 ， 我 们 会 一 起 学 习 如 何在 Angular 2 中 使 用 第 三 方 样式 库 。 


在 实际 工作 中 ， 我 们 不 止 会 碰 到 父 组 件 和 子 组 件 的 通信 ， 更 多 时 候 我 们 会 有 不 同 模块 的 组 件 需要 通信 ， 这 种 情况 就 需要 我 们 引入 Rx 来 使 用 观察 者 模式 进行 消息 的 传递 了 。 


6.1 生产 环境 切 体 验 


用 angular-cli 命 令 建立 生产 环境 是 非常 简单 的 ， 只 需 输 入 ng build--prod--aot 即 可 。--prod 会 使 用 生产 环境 的 配置 文件 ，--aot 会 使 用 AOT 蔡 代 JIT 进 行 编译 。 现 在 实验 一 下 ， 会 看 到 类 似 下 面 的 输出 : 


wangpengdeMacBook-Pro:hello-angular wangpeng$ ng build --prod --aot 
19115ms building modules 

120ms sealing 

13ms optimizing 

Oms basic module optimization? 

140ms module optimization 
10ms advanced module optimization 
55ms basic chunk optimization? ? ? ? 
Oms chunk optimization? 

37ms advanced chunk optimization 
2540ms building modules 
Oms module and chunk tree optimization? 
208ms module reviving 

1ms module order optimization? 

4ms module id optimization? 

5ms chunk reviving? 


Oms chunk order optimization? 

42ms chunk id optimization 

992ms hashing 

Oms module assets processing? 

112ms chunk assets processing 

4ms additional chunk assets processing? 
1ms recording? 

10619ms additional asset processing 
3397ms chunk asset optimization 
106ms asset optimization 

133ms emitting 

Hash: 58£5430a2750581000106 

Version: webpack 2.1.0-beta.25 
Time: 37686ms 


Asset Size Chunks Chunk Names 
styles.b2328beb0372c051d06d.bundle.js 146 bytes 2, 3 [emitted] styles 
0.d2cfd93736d4b05011c6.bundle.map 2.94 kB [emitted] 
0.83018a653e528bccf5b56.bundle.map 3.71 kB [emitted] 
0.4df45c7fe362aa76d04d.bundle.map 4.33 kB [emitted] 
0.ba72£3cc4e701be67def .bundle.map 3.9 kB? [emitted] 
0.87e1229c55dca4cb0782 .bundle.map 3.54 kB [emitted] 
0.62cdfb4a7efe41d55230.bundle.map 3.28 kB [emitted] 
0.85b09b0cdc0da8a0falfc.bundle.map 3.04 kB [emitted] 
0.688848f52a362bd543fc.bundle.map 2.98 kB [emitted] 
0.d25d9bcd4491b5cdbf80.chunk.js 8.83 kB 0, 3 [emitted] 


仔细 看 一 下 命令 行 输出 ， 我 们 应 该 可 以 猜 到 Angular 移 除了 一 些 没有 用 到 的 类 库 (Google 称 之 为 Shaking 过 程 ) ， 对 js 和 css 等 进行 了 压缩 等 优化 工作 。Angular 在 我 们 的 项 目 根 目录 下 建立 了 一 个 dist 文 


件 夹 ， 用 于 生产 环境 的 文件 就 输出 在 这 个 文件 夹 了 ， 如 图 6.1 所 示 。 


| | 0.3a6bce6ca13625f2426a.bundle.map 
L]| | 0.3ffaf3fd9d867da31a8c.bundle.map 
| | 0.428e1ef3285218600ra4. 


| 类 型 : MAP Xo 
| ] 0.688d48152a362| 大 小 : 4.40 KB 


2016/11/29 1:30 
2016/11/29 1:30 
016/11/29 1:30 
016/11/29 1:30 


| ] 0.b79f0eeb945e2| 修 改 日 期 : 2016/11/29 1:30 [016/11/29 1:30 
| | 0.be6cd9a0e8652c6cef95.bundle.map 
| | O.ddcfb74954adf060054a.bundle.map 
LA | favicon 

€ index 


4 inline.d41d8cd98f00b204e980.bundle 


| | inline.d41d8cd98f00b204e980.bundle.m... 


4 main.c5f55e8b/5bea5955fe4. bundle 

| | main.c5f55e8b75bea5955fe4.bundle.js.gz 
| ] main.c5f55e8b75bea5955fe4.bundle.map 
4 styles.b2328beb0372c051d06d.bundle 

| | styles.b2328beb0372c051d06d.bundle.... 


l styles.c31ec254a3fa75c126ac429ca4184.. 2016/11/29 1:30 sp UEM E 1 KB 
图 6.1 生产 环境 输出 的 文件 
我 们 安装 一 个 http-server，npm i-g http-server， 然 后 在 dist 目 录 键 入 http-server。 打 开 浏 览 器 进入 http:/Vlocalhost:8080， 我 们 会 看 到 网 页 打开 了 。 但 如 果 打 开 console， 或 者 试 着 登录 一 下 ， 你 会 


发 现存 在 很 多 错误 ， 参 见 图 6.2。 
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2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 
2016/11/29 1:30 


MAP 文件 

MAP 文件 

MAP 文件 

MAP 文件 

MAP 文件 

MAP 文件 

MAP 文件 

图 标 

HTML 文件 
JavaScript 源 文件 
MAP 文件 
JavaScript 源 文件 
GZ 文件 

MAP 文件 
JavaScript 源 文件 
MAP 文件 
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TypeError: Cannot read property 'registerControl' of null 
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http: //localhost:8080/majin.c5f55e8b75bea5955fe4. bund]e.13s:1486:71407 
t.invokeTask (http;//loca]host:8080/main.c2f22e8b75bea2955fe4. bund]e. js:1486:6547 


LID' 16 oninvoke 


图 6.2 ”由 于 未 配置 Hash 造 成 的 错误 


这 是 由 于 angular-cli 命 令 当 前 的 bug 产 生 的 ， 目 前 需要 对 路 由 做 hash 处 理 : 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16136/0! 


&NgModule ({ 
imports: [ 
RouterModule.forRoot(routes, { useHash: true ]) 


, 
exports: [ 
RouterModule 


] 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0! 


EBPS/Text/... 


EBPS/Text/... 


5 KB 

5 KB 

4 KB 

3 KB 

5 KB 

3 KB 

5 KB 

6 KB 

1 KB 

2 KB 
14 KB 
759 KB 
157 KB 
5,7 /0 KB 
1 KB 

1 KB 


只 需 在 app-routing.module.ts 中 为 RouterModule 配 置 {useHash:true} 的 属性 即 可 。 这 样 ，Angular 会 在 URL 上 加 上 一 个 #， 比 如 login 的 URL 现 在 是 http://localhost:8080/#/login。 


这 样 改动 后 ， 功 能 又 好 用 了 。 以 后 如 果 我 们 的 项 目 需要 发 布 到 生产 环境 中 ， 利 用 angular-cli 就 可 以 很 方便 地 处 理 了 。 然 后 我 们 回 到 开发 环境 ， 请 天 掉 8080 端 口 的 http 服 务 器 ， 并 删 掉 dist。 


注 : 1.0.0-beta.22-1 修 复 了 这 个 bug， 所 以 如 果 你 安装 的 版 本 是 22-1 或 更 高 版 本 ， 可 以 不 使 用 上 面 的 hash 方 法 ， 低 于 此 版 本 的 才 需 要 这 么 做 。 


6.2 更 新 angular-cli 的 方法 


由 于 angular-dli 版 本 仍 处 于 快速 迭代 中 ， 因 此 可 能 会 需要 不 时 安装 新 版 本 ， 这 里 介绍 一 下 怎么 升级 angular-cli。 首 先 到 https://github.com/angular/angular-cli/releases 查 看 是 否 有 新 版 本 ， 参 见 图 
6.3。 当 然 ， 也 要 查看 新 版 本 修复 了 哪些 bug， 如 果 这 个 问题 是 目前 你 需要 解决 的 ， 那 么 就 应 该 安装 这 个 新 版 本 了 。 


LJ angular / angular-cli Q Watch» 606 yrStar 6,048 Fork 


€» Code (DIssues 406 M Pull requests 31 Mi Projects 1 J Wiki A» Pulse 由 Graphs 


9 hours ago 


v1.0.0-beta.24 -- 
Cr cdfld68 [l)zip [D tar.gz 


v1.0.0-beta.23 = 


5 days ago © e9bc887 [Dzip [D tar.gz 


v1.0.0-beta.22-1 = 


, 
6 days ago © 9687081 [Dzip [D tar.gz 


v1.0.0-beta.22 = 


19 days ago © 787dfa2 [Dzip [D tar.gz 


图 6.3  angular-cli release 7 vf 


angular-cli, f&FBnpm install-g angular-cliGlatest, 


6.3 ”第 三 方 样式 库 


之 前 我 们 使 用 的 是 自己 为 各 个 组 件 写 样 式 的 方法 ， 其 实 Angular 团 队 有 一 套 官方 的 符合 Material Design 的 内 建 组 件 库 : https://github.com/angular/material2. (这 个 库 还 属于 早期 阶段 ， 很 多 控件 不 
可 用 ， 所 以 大 家 可 以 关注 ， 但 现 阶 段 不 建议 在 生产 环境 中 使 用 ) 。 

除了 官方 之 外 ， 目 前 有 大 量 的 比较 成 熟 的 样式 库 ， 比 如 bootstrap、material-design-lite 等 。 本 节 以 material-design-lite 为 例 来 看 一 下 怎么 使 用 这 些 样式 库 。Material Desing Lite 是 Google 为 Web 开 
发 的 一 套 基于 Material Design 的 样式 库 。 由 于 是 Google 开 发 的 ， 所 以 你 访问 之 前 要 科学 上 网 。 


我 们 当然 可 以 直接 使 用 官方 的 CSS 库 ， 但 是 有 好 心 人 已 经 帮 我 们 封装 成 了 比较 好 用 的 组 件 模块 了 ， 组 件 模块 的 好 处 是 可 以 使 模板 写 起 来 更 简洁 ， 而 且 易于 扩展 。 现 在 打开 一 个 terminal， 输 入 npm 
install--save angular2-mdl。 然 后 在 你 需要 使 用 MDL 组 件 的 模块 中 引入 MdlModule。 我 们 首先 希望 改造 一 下 AppComponent， 目 前 它 只 有 一 句 简陋 的 文字 输出 : 


«mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed» 
«mdl-layout-header» 
«mdl-layout-header-row-» 
«mdl-layout-title»Awesome Todos«/mdl-layout-title» 
«mdl-layout-spacer»«/mdl-layout-spacer» 
«!-- Navigation. We hide it in small screens. --> 
«nav class-"mdl-navigation"» 
<a class-"mdl-navigation link"»Logout«/a» 
«/nav» 
«/mdl-layout-header-row» 
«/mdl-layout-header» 
«mdl-layout-drawer» 
«mdl-layout-title»Title«/mdl-layout-title» 
«nav class-"mdl-navigation"» 
<a class-"mdl-navigation  link"»Link«/a» 
«/nav» m 
«/mdl-layout-drawer» 
«mdl-layout-content class-"content"» 
«router-outlet»«/router-outlet» 
«/mdl-layout-content» 
«/mdl-layout» 


这 段 代 码 里 面 mdl 开 头 的 标签 都 是 我 们 刚 引 入 的 组 件 库 封 装 的 组 件 ， 具 体 的 用 法 可 以 参考 http://mseemann.io/angular2-mdly 和 https://getmdl.io 中 的 文档 资料 。 


<mdl-layout> </mdl-layout> 是 一 个 布局 组 件 ，mdl-layout-fixed-header 是 一 个 可 以 让 header 固 定 在 页 面 顶 部 的 属性 ，mdl-layout-header-seamed 用 于 使 header 受 有 阴影 。mdl-layout-header 


是 一 个 顶部 组 件 ，mdl-layout-header-row 是 在 顶部 组 件 中 形成 一 行 的 容器 。 


mdl-layout-spacer 是 一 个 占 位 的 组 件 ， 它 会 把 组 件 剩余 位 置 占 满 ， 防 止 出 现 错 位 。mdl-layout-drawer 是 一 个 抽 居 组 件 ， 和 Android 的 标准 应 用 类 似 ， 点 击 顶 部 菜单 图 标 会 从 侧面 滑 出 一 个 菜单 。 别 忘 


了 在 AppModule 中 引入 : 


2 


ttp: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
mport { MdlModule } from 'angular2-mdl'; 
ttp: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
NgModule (1 

http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 

imports: [ 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
MdlModule, 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 


H- 


2 


© 


], 
bootstrap: [AppComponent] 
}) 


export class AppModule { } 


为 了 使 用 ,我们 还 需要 对 颜色 做 个 定制 ， 这 个 定制 需要 使 用 一 种 CSS 的 预 编译 技术 (M|SASS) ， 需 要 建立 一 个 src\styles.scss， 然 后 定义 Material Design 的 颜色 ， 具体 颜色 名 字 的 定义 是 在 Google 调 色 
板 类 中 定义 的 ， 可 以 查看 http://mseemann.io/angular2-mdl/theme， 如 图 6.4 所 示 。 


QGimport "-angular2-mdl/scss/color-definitions"; 


S$Scolor-primary: S$palette-blue-500; 
S$color-primary-dark: S$palette-blue-700; 
Scolor-accent: $palette-amber-A200; 
$color-primary-contrast: $color-dark-contrast; 
$color-accent-contrast: S$color-dark-contrast; 


Gimport '-angular2-mdl/scss/material-design-lite'; 


Material Design 中 区 分 主 色 (Primary) 和 配色 (Accent) ， 比 如 像 图 中 的 颜色 搭配 ， 主 色 是 blue， 在 scss 中 我 们 可 以 设置 $color-primary:$palette-blue-500;，500 指 的 是 颜色 深度 。 如 果 想 更 深 一 
些 ， 就 指定 成 600，900 等 ， 可 以 自己 实验 一 下 。 


«link rel="stylesheet” hrefs"https://code.getmd1l.io/1.2.1/material.blue-pink.min.css" /> 


Accent 


Checkbox 


($ Value 10O Value 2 


6 Option 1 


图 6.4 Material Design] & 25. 


类 似 的 配色 pink， 就 可 以 设置 $gcolor-accent:$palette-pink-300;。 那 么 gcolor-primary-dark 是 什么 意思 呢 ? 顾名思义 ， 它 是 更 深 的 主 色 的 意思 ，Material Design 的 主要 设计 目标 也 是 以 色彩 和 动画 的 
变化 来 给 用 户 不 同 的 体验 ， 所 以 主 色 尽 量 不 要 过 深 ， 因 为 还 有 更 深 的 主 色 需 要 定义 。 


由 于 我 们 使 用 的 CLI 并 不 知道 我 们 采用 了 预 编译 的 CS9， 所 以 需要 改 一 下 angular-clijson， 把 styles 改 写成 下 面 的 样子 : 


"styles": [ 
"styles.scss" 


l; 


保存 后 ， 打 开 浏 览 器 看 一 下 效果 ， 如 图 6.5 所 示 。 


Awesome Todos 


图 6.5 ”应 用 了 MDL 布 局 的 首页 头 部 


我 们 接 下 来 改造 一 下 login 的 模板 : 


<div> 
«form (ngSubmit)-"onSubmit () "> 
«mdl-textfield 
type="text" 
label-"Usernamehttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/..." 
name="username" 


floating-label 
required 
[ (ngModel) ]2"username" 
JdusernameRef-"ngModel" 
> 
«/mdl-textfield» 
«div *nglf-"auth?.hasError" > 
{ {auth? .errMsg}} 
</div> 
<mdl-textfield 
type="password" 
label-"Passwordhttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/..." 
name-"password" 
floating-label 
required 
[ (ngModel) ] "password" 
fpasswordRef-"ngModel"» 

«/mdl-textfield» 

«button 
mdl-button mdl-button-type-"raised" 
mdl-colored-"primary" 
mdl-ripple type-"submit"» 
Login 

«/button» 

«/form» 
«/div» 


由 于 采用 了 符合 Material Design 的 组 件 ， 我 们 就 不 需要 原来 用 于 验证 的 div 了 ， 如 图 6.6 所 示 。 


Awesome Todos 


Username... 
test x Password... 


图 6.6 ”采用 Material Design 风 格 的 表单 控件 


下 面 看 一 下 Todo， 原 来 我 们 在 CSS 中 用 了 SVG 来 改写 复 选 框 的 样子 ， 现 在 我 们 试 试用 md 来 做 。 在 todo-listcomponent html 中 把 ToggleAll 改 写成 下 面 的 样子 : 


«mdl-icon-toggle class-"toggle-all" [mdl-ripple]-"true" (click)-"onToggleAllTriggered()"»expand more«/mdl-icon-toggle» 


这 个 标签 用 于 把 一 个 图 标 修 改 成 复 选 框 ， 这 里 用 到 了 Google 的 icon font， 所 以 需要 在 index.html 中 引入 : 


<!doctype html» 
«html» 
<head> 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
«link rel="stylesheet" href-"https://fonts.lug.ustc.edu.cn/icon?family- 
Material-Icons"» 
«/head» 
«body» 
«app-root»Loadinghttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...«/app-root» 
</body> 
</html> 


我 们 用 了 中 国 科 大 的 镜像 ， 因 为 是 Google 的 产品 。 当 然 ，Todoltem 模 板 中 的 checkbox 也 需要 改造 成 : 


«mdl-icon-toggle (click)-"toggle()" [(ngModel)]-"isChecked"»check circle«/mdl-icon-toggle» 


Todo 变 成 下 面 的 样子 ， 也 还 不 错 ， 如 图 6.7 所 示 。 


一 Awesome lodos 


What do you want 


© getting up 


© have breakfast 


© go to school 


5 items left 


图 6.7  4& Jf] Material Design XL 45-8 Todo List 


6.5 ”模块 优化 


现在 仔细 看 一 下 我 们 的 各 个 模块 定义 ， 发 现 我 们 不 断 地 重复 引入 了 CommonModule、FormsModule、MdlModule， 这 些 如 果 在 大 部 分 的 组 件 中 都 会 用 到 话 ， 我 们 不 妨 建立 一 个 


SharedModule (srcNappNsharedNshared.module.ts) : 


impor! 
impor! 
impor! 
impor! 


ENgMoqule ({ 


)) 


( NgModule } from 'Gangular/core'; 

{ CommonModule } from 'Gangular/common'; 
( FormsModule ) from 'Gangular/forms'; 

( MdlModule j from 'angular2-mdl'; 


imports: 
CommonModule, 
FormsModule, 
MdlModule 

]; 

exports: [ 
CommonModule, 
FormsModule, 
MdlModule 

] 


export class SharedModule { } 


这 个 模块 的 作用 是 把 常用 的 组 件 和 模块 打包 起 来 (虽然 现在 没有 组 件 ， 只 是 把 常用 的 模块 导入 又 导出 ) 


h 
i 


h 


)) 


ttp: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
import ( SharedModule } from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0 


ttp: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
&NgModule (1 


imports: [ 

SharedModule, 

http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
l; 
declarations: [ 

TodoComponent, 

http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
l; 
providers: [ 

(provide: 'todoService', useClass: TodoService] 


l; 


export class TodoModule {} 


天 于 模块 的 最 佳 实践 


Angular 团 队 对 于 共享 特性 模块 有 如 下 建议 : 


' 坚持 在 shared 目 录 中 创建 名 叫 SharedModule 的 特性 模块 (例如 在 app/shared/shared.module.ts 中 定义 SharedModule) 。 

" 坚持 把 可 能 被 应 用 其 他 特性 模块 使 用 的 公共 组 件 、 指 令 和 管道 放 在 SharedModule 中 ， 这 些 资 产 倾 向 于 共享 自己 的 新 实例 (而 不 是 单 例 ) 
"坚持 在 SharedModule 中 导入 所 有 模块 都 需要 的 资产 (例如 CommonModule 和 FormsModule) 。 

"坚持 在 SharedModule 中 声明 所 有 组 件 、 指 令 和 管道 。 

"坚持 从 SharedModule 中 导出 其 他 特性 模块 所 需 的 全 部 符号 。 


- 避免 在 ShatedModule 中 指定 应 用 级 的 单 例 服务 提供 商 。 但 如 果 是 故意 设计 的 单 例 也 可 以 ， 不 过 还 是 要 小 心 。 


很 显然 ， 我 们 的 共享 模块 还 没有 全 部 做 到 ， 大 家 可 以 作为 练习 自己 试验 一 下 


同样 ， 对 于 核心 特性 模块 ， 官 方 的 建议 是 : 


6.6 


下 面 我 们 要 实现 这 样 一 个 功能 : 在 用 户 未 登录 时 ， 顶 部 菜单 中 只 有 Login 一 个 链接 可 见 ， 用 户 登录 后 ， 项 部 菜单 中 有 三 个 链接 ， 一 个 是 Todo,， 


"坚持 在 core 目 录 下 创建 一 个 名 叫 CoreModule 的 特性 模块 (例如 在 app/core/core.module.ts 中 定义 CoreModule) 。 
" 坚持 把 一 个 要 共享 给 整个 应 用 的 单 例 服 务 放 进 CoreModule 中 (例如 ExceptionService 和 LoggerService) o 


- 坚持 导入 CoreModule 中 的 资产 所 需要 的 全 部 模块 (例如 CommonModule 和 FormsModule) 。 


. 坚持 从 CoreModule 中 导出 AppModule 需 导入 的 所 有 符号 ， 使 它们 在 所 有 特性 模块 中 可 用 。 
. 坚持 防范 多 次 导入 CoreModule， 并 通过 添加 守卫 逻辑 来 尽快 失败 。 


- 避免 在 AppModule 之 外 的 任何 地 方 导入 CoreModule。 


多 个 不 同 组 件 则 的 通信 


部 菜单 改造 成 如 下 : 


<!--src\app\app.component .html--> 
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed> 


</a> 


<mdl-layout-header> 
<md] -layout- -header-row> 
<mdl-layout-title>{{title}}</mdl-layout-title> 
<mdl-layout-spacer></mdl-layout-spacer> 


<!-- Navigation. We hide it in small screens. --> 
«nav class-"m mdl-navigation" *nglf-"auth?.user?.username !== null"> 
«a class-"mdl-navigation link" routerLink="todo">Todos</a> 
«/nav» m 
«nav class-"mdl-navigation" *ngIf-"auth?.user?.username !== null"» 
<a class-"mdl-navigation link" routerLink-"profile"»((auth.user.username]] 
«/nav» 
«nav class-"mdl-navigation"» 
«a class-"mdl-navigation link" *ngIf-"auth?.user?.username === null" (click)-"login()"» 


Login 


o 


- 坚持 把 那些 “只 一 次 ”的 类 收集 到 CoreModule 中 ， 并 对 外 隐藏 它们 的 实现 细节 。 简 化 的 AppModule 会 导入 CoreModule， 并 且 把 它 作 为 整个 应 用 的 总 指挥 。 


一 个 是 用 户 个 人 信息 ， 


， 这 样 ， 在 其 他 模块 中 只 需 引 入 这 个 模块 即 可 ， 比 如 TodoModule 现 在 看 起 来 是 下 面 的 样子 : 


EBPS/Text/../shared/shared.module'; 


" 坚持 把 应 用 级 、 只 用 一 次 的 组 件 收集 到 CoreModule 中 。 只 在 应 用 启动 时 从 AppModule 中 导入 它 一 次 ， 以 后 再 也 不 要 导入 它 〈 例 如 NavComponent 和 SpinnertrComponent 等 ) 。 


另 一 个 是 Logout。 按 这 个 需求 将 顶 


这 样 改造 
当然 我 们 可 以 将 


这 种 情况 就 要 引入 Rx 了 ，Rx 的 学 习 门 槛 较 高 ， 也 不 是 本 教程 的 重点 ， 但 我 还 是 这 里 尝试 着 解释 一 下 。Rx 是 响应 式 编 程 的 利器 ， 它 的 学 习 门 槛 来 自 于 思维 方式 的 转 人 


</a> 


«a class-"mdl-navigation . 


Logout 
</a> 
</nav> 
</mdl-layout-header-row> 
</mdl-layout-header> 
<mdl-layout-drawer> 
<mdl-layout-title>{{ti 
«nav class-"mdl-navigation"» 
«a class-"mdl-navigation 
«/nav» E 
«/mdl-layout-drawer» 


«mdl-layout-con 

«router- [e] 
«/md] 
«/mdl-1 


utle 


ayoul 
ayout» 


告 完 后 


lamzvuln 


后 的 


整个 


页 
页 


面 结构 


是 项 


Y 


总 体 来 看 Rx 是 一 个 数据 流 或 信号 流 ， 


其 实在 Angular 2 中 ，Rx 是 无 处 不 在 的 ， 还 


Rx 版 本 : 


im 


QI 


por 
por 


nje 


expor 


private api url = 
constructor (priva 


getUser (userI 
const url = 


port 


port 


port 


{ Injectab] 


e] 


所 有 的 操作 符 都 是 为 了 对 这 


e.) 


from 


( Http, Headers, Respons 
{ Observabl 


ctable () 


( User } 


d: n 
'S(t 


t class UserService { 


'ht 


'rxjs/add/operator/map'; 


te h 


umber) : 


ttp: Http) 


return this.http.get (url) 
} 
findUser (username: string): 
const url = 
return this.http.get (url) 
.map (res => ( 
l 
return 


大 家 可 


} 


意 到 了 ， 其 实 有 没有 Promise 都 无 所 谓 ， 大 概 的 写法 也 是 类 似 的 ， 只 不 


); 


} 


tent class-"content"» 
t»«/router-outlet» 
t-content» 


from 'Gangular/core'; 


td 


link" *ngI 


d)'; 


link"»Link«c/a» 


Observable«User» { 
his.api url}/${userI 


.map(res => res.json() as User); 


f-"auth?.user?.usernam 


jenes 


tle))«/mdl-layout-title» 


部 菜单 只 加 载 一 次 ， 底 下 的 内 容 随 着 不 同 路 由 显示 不 同 内 容 。 但 如 果 我 们 要 在 login 后 顶部 菜单 也 随 
面 当 成 父 控件 ， 顶 部 菜单 是 子 控件 的 形式 ， 但 这 时 你 发 现 由 于 我 们 是 用 路 由 插座 (<router-outlet> «/router-outlet») 来 显示 内 容 的， 所 以 无 法 采用 子 控件 的 形式 传递 


文 个 流 进 


from '8Gangular/http'; 
'rxjs/Rx'; 


from 'http://www.hzcourse.com/resource/readi 


(click)-"logout () "> 


EE 


行 控制 。 写 Rx 时 要 对 系统 数据 或 信号 的 完整 逻 


之 改变 的 话 ， 


辑 流程 先 想 清楚 了 然 


Book?path-/openresources/teach ebook/uncompressed/16136/0E 


一 定 要 实现 某 种 通信 机 制 。 前 面 我 们 讲 过 EventEmiiter， 


E. 


变 ， 从 传统 的 编程 思维 转 成 流 式 思维 : 
后 就 比较 好 写 了 。 


得 我 们 之 前 总 用 到 toPromise0 这 个 方法 吗 ? 其 实 这 个 方法 是 给 不 太 熟 悉 Rx 的 人 用 的 ，Angular 本 身 返 回 的 就 是 Observable。 我 们 现在 把 UserService 改 成 


ea 


tp://localhost:3000/users'; 


Observable«User» { 
'S(this.api url])/?username-$ {username} '; 


import { Component, Inject } 

import { Router, ActivatedRoute, 

import { Auth } from 'hi 

QComponent ({ 
selector: 'app-login', 
templateUrl: './login.component.html', 
styleUrls: ['./login.component.css'] 


)) 


export class LoginComponent { 


username 


r 
password = ''; 


auth: Aut 
construct 


onSubmit () f 
this.service 


.loginWi 


? users[0] 


t users = res.json() as User[]; 
(users.length»0) 


from 'Gangular/core'; 


Params ) from 'Gangular/ro 


BPS/Text/../domain/entities'; 


: null; 


过 返回 的 是 Observable。 这 里 改 了 之 后 ， 相 关 调 用 


uter'; 


ttp://www.hzcourse.com/resource/readl 


Inject('auth') private service, private router: 


e 
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的 地 方 都 要 改 一 下 ， 比 如 LoginComponent: 


BPS/Text/../domain/entities'; 


Router) { } 


.Subscribe (auth => { 
Object.assign({}, auth); 


this.a 
if(!au 


uth = 
th.has 


Error){ 


this.router.navigate(['todo']); 


p)? 


AuthService 也 需要 改写 成 下 面 的 样子 。 
变 了 Auth 的 属性 ， 人 
A N (this.auth) ; 写 入 其 变化 ， 在 getAuth( 中 用 return this.subject.asObservable(); 将 Subject 转 换 成 Observable: 


impor! 
impor! 


impor! 
impor 
impor 


QI 


expor 


Injectable, 


Inject ] 


t ( Auth } 


njectable() 


subject: 
cons 


} 


getAuth () : 
re 


} 


unAu 


} 


Lruc 


curn 


th(): 


this.auth = 


this.subject.next (t 


{}, 


(user: 


(hasE 
ReplaySubjec 
cor (priva 


Observable«Au 
this.subject.asObservable(); 


void { 


Http, Headers, Respons 


} 


{ ReplaySubject, Observable } 


意 到 我 们 引入 了 一 个 新 概念 : Subject。Subject 既 是 Observer (观察 者 ) 也 是 Observable (被 观察 对 象 ) 。 
显 性 调用 的 ， 其 他 需要 观察 Auth 变 化 的 地 方 调 用 的 是 getAuth() 方 法 。 


from 


t class AuthService { 
auth: Auth = 


pror: 


true, 


'rxjs/add/operator/map'; 
from 'http://www.hzcourse.com/resource/readi 


redirectUrl: 


t«Auth» 


te http: 


Http, 


th» { 


Object.assign( 


this.auth, 
null, 


hasE 


CrOI: 


true, 


QI 


thCredentials (this.username, this.password) 


from 'Gangular/core'; 
from '8Gangular/http'; 


'rxjs/Rx'; 


redirectUrl: 


his.au 


loginWithCredentials (username: 
this.userService 
.findUser (username) 
user => ( 

auth = 


re 


turn 


.map ( 
let 


if 


a 
a 


U 
U 


Error 


null; 


th); 


new Auth(); 
(null === user)( 
th.user 


th.hasl true; 


string, password: 


, errMsg: 
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这 样 的 话 ， 我 们 需要 在 Auth 发 生变 化 时 推送 


x 


这 里 采用 Subject 的 原因 是 我 们 在 Login 时 改 
关 变化 出 去 ， 我 们 在 


BPS/Text/../domain/entities'; 


'not logged in'j; 
new ReplaySubject«Auth» (1); 
nject('user') private userService) ( 


'', errMsg: 


string): 


'not logged in']); 


Observable«Auth» { 


th.errMsg = 'user not found'; 

se if (password === user.password) { 
th.user = user; 

th.hasError - false; 

.errMsg - null; 

se ( 
th.user = null; 

th.hasError = true; 

th.errMsg = 'password not match'; 


VYDH 
Ge E a ae ee 
Ct 
D 


} 
this.auth = Object.assign({}, auth); 
this.subject.next (this.auth); 

return this.auth; 


); 


但 为 什么 是 ReplaySubject 呢 ?我 们 共有 两 处 需要 监听 Auth 的 变化 : 一 处 是 导航 栏 ， 导 航 栏 会 依据 不 同 的 Auth 值 来 显示 /隐藏 不 同 菜单 ; 另 一 处 是 todo 的 路 由 守卫 ， 它 会 依据 Auth 是 否 有 错误 来 判断 是 
否 人 允许 进入 该 路 由 url。 我 们 来 以 时 间 维 度 分 析 一 下 流程 : 我 们 在 执行 登录 时 ， 如 果 鉴 权 成 功 ， 会 导航 到 某 个 路 由 (这 里 是 todo) ， 这 时 会 引发 CanActivate 的 检查 ， 而 此 时 最 新 的 Auth 已 经 发 射 完毕 (因为 
我 们 在 loginWithCredentials 中 写 入 了 变化 值 ) ，CanActivate 检 查 时 会 发 现 没 有 Auth 数 据 : 


getAuth() Auth:() Auth{user: (id: l1http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...)) getAuth() -没有 Auth 数 据 发 射 了 
| | | | 
导航 栏 登录 前 登录 后 toqo 路 由 守卫 激活 


这 种 情况 下 我 们 需要 缓存 最 近 的 一 份 Auth 数 据 ， 无 论 谁 ， 什 么 时 间 订阅 ， 只 要 没有 更 新 的 数据 ， 我 们 就 推送 最 近 的 一 份 给 它 ， 这 就 是 ReplaySubject 的 意义 所 在 。 


下 面 我 们 改写 路 由 守卫 : 


import { Injectable, Inject ) from 'Gangular/core'; 
import í( 
CanActivate, 
CanLoad, 
Router, 
Route, 
ActivatedRouteSnapshot, 
RouterStateSnapshot } from 'Gangular/router'; 
import { Observable ) from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 


GInjectable|() 
export class AuthGuardService implements CanActivate, CanLoad { 


constructor ( 
private router: Router, 
QGInject('auth') private authService) { ] 


canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable 
«boolean» { 
let url: string = state.url; 


return this.authService.getAuth() 
.map (auth => l!auth.hasError); 


} 
canLoad (route: Route): Observable<boolean> { 
let url = '/${route.path}'; 


return this.authService.getAuth() 
.map (auth => !auth.hasError); 


这 里 你 会 发 现 多 了 一 个 canLoad 方 法 ，canActivate 是 用 于 是 否 可 以 进入 某 个 url， 而 canLoad 是 决定 是 否 加 载 某 个 url 对 应 的 模块 。 所 以 需要 再 改 下 路 由 : 


import { NgModule } from 'Gangular/core'; 

import { Routes, RouterModule ) from 'Gangular/router'; 
import { LoginComponent ) from './login/login.component'; 
import { AuthGuardService } from './core/auth-guard.service'; 


const routes: Routes = [ 
{ 
path; t; 
redirectTo: 'login', 
pathMatch: 'full' 


}, 
{ 


path: 'todo', 
redirectTo: 'todo/ALL', 
canLoad: [AuthGuardService] 
} 
]; 


&NgModule ({ 
imports: [ 
RouterModule.forRoot(routes, { useHash: true ]) 


l, 
exports: [ 
RouterModule 


] 
}) 
export class AppRoutingModule {} 


现在 打开 浏览 器 欣赏 一 下 我 们 的 成 果 ， 如 图 6.16 所 示 。 


Awesome Todos 


Mhat do you want 


Q getting up 

© have breakfast 
© goto school 

o 

© 


5 items left E Active Completed 


图 6.16 ”改造 后 的 登录 后 效果 图 


6.7 ”方便 的 管道 


我 们 一 直 没 有 提 到 的 一 点 就 是 管道 (pipe) ， 虽 然 我 们 的 例子 中 没有 用 到 ， 但 其 实 这 是 Angular 2 中 提供 的 非常 方便 的 一 个 特性 。 这 个 特性 可 以 让 我 们 很 快 地 将 数据 在 界面 上 以 我 们 想 要 的 格式 输出 出 
来 。 还 是 拿 例子 说 话 ， 比 如 我 们 在 页 面 上 显示 一 个 日 期 ， 先 建立 一 个 简单 的 模板 : 


<p> Without Pipe: Today is {{ birthday }} </p> 
«p» With Pipe: Today is {{ birthday | date:"MM/dd/yy" }} </p> 


再 来 建立 对 应 的 组 件 文件 : 


import { Component, OnDestroy } from 'Gangular/core'; 


GComponent ({ 
selector: 'app-playground', 
templateUrl: './playground.component.html', 
styleUrls: ['./playground.component.css'] 
)) 
export class PlaygroundComponent { 
birthday = new Date(); 
constructor() { } 


打开 浏览 器 ， 我 们 看 一 下 效果 ， 见 图 6.17。 我 们 会 发 现 没有 应 用 管道 的 话 ， 时 期 的 默认 输出 是 一 个 非常 难 读 的 显示 ， 而 应 用 管道 的 话 则 是 相反 。 这 些 当然 可 以 通过 组 件 中 的 代码 实现 ， 但 是 同一 个 数据 
往往 在 一 个 界面 中 需要 这 样 显 示 ， 在 另 一 个 界面 中 需要 那样 显示 。 有 了 管道 ， 我 们 会 更 灵活 、 更 方便 地 显示 数据 。 


Awesome Todos 


Nithout Pipe: Today is Mon Dec 26 2016 01:02:39 GMT--0800 (CST) 


Vith Pipe: Today is 12/26/16 


E6417 无 管道 和 有 管道 的 日 期 输出 


上 面 的 例子 可 能 还 没 太 明显 ， 我 们 进一步 改造 一 下 模板 : 


<p> Without Pipe: Today is {{ birthday }} </p> 

«p» With Pipe: Today is {{ birthday | date:"MM/dd/yy" }} </p> 
<p>The time is {{ birthday | date:'shortTime' }}</p> 

<p>The time is {{ birthday | date:'medium' ))«/p» 


运行 结果 如 图 6.18 所 示 。 


Awesome Todos 


Without Pipe: Today is Mon Dec 26 2016 01:14:59 GMT40800 (CST) 


Vith Pipe: Today is 12/26/16 
e time is 1:14 AM 


he time is Dec 26, 2016, 1:14:59 AM 


图 6.18 ”同一 数据 可 以 显示 成 不 同样 子 


而 且 更 牛 的 是 ， 多 个 管道 可 以 串 起 来 使 用 ， 比 如 说 图 中 最 下 面 那 个 日 期 我 们 希望 把 Dec 大 写 ， 就 可 以 这 样 使 用 : 


<p>The time is (( birthday | date:'medium' | uppercase ))«/p» 


运行 结果 如 图 6.19 所 示 。 


= Awesome Todos 


Nith Pipe: Today is 12/26/16 
The time is 1:18 AM 


he time is Dec 26, 2016, 1:18:33 AM 


he time is DEC 26, 2016, 1:18:33 AM 


图 6.19 ”多 个 Pipe 连 用 


68 指令 


另 一 个 我 们 一 直 没 有 提 到 的 重要 概念 就 是 指令 (directive) 了 。 虽 然 我 们 没 提 到 指令 ， 却 已 经 用 过 了 。 比 如 *ngFor，*nglf 等 。 
Angular 2 中 的 指令 分 成 三 种 : 结构 型 (Structural) 指令 和 属性 型 (Attribute) 指令 ， 还 有 一 种 就 是 Component， 组 件 本 身 就 是 一 个 带 模板 的 指令 。 


结构 型 指令 可 以 通过 添加 、 删 除 DOM 元 素来 更 改 DOM 树 的 布局 ， 比 如 我 们 前 面 使 用 *ngFor 在 todo-list 的 模板 中 添加 了 多 个 todo-item。 而 属性 型 指令 可 以 改变 一 个 DOM 元 素 的 外 观 或 行为 ， 比 如 我 
们 利用 ”ngModel 进 行 双向 绑 定 ， 改 变 了 该 组 件 的 默认 行为 (我 们 在 组 件 中 改变 某 个 变量 值 ， 这 种 改变 会 直接 反应 到 组 件 上 ， 这 并 不 是 组 件 自身 定义 的 行为 ， 而 是 我 们 通过 *ngModel 来 改变 的 ) 。 


Angular 2 中 给 出 的 内 建 结构 型 指令 如 表 6.1 所 示 。 


A61 内 建 结构 型 指令 


名 各 说 明 


基于 canShow 表达 式 的 值 移 


nelf «div*ngIf-"canShow"- "a ee 
i ` 除 或 重新 创建 部 分 DOM Rid. 

把 二 元 系 及 其 内 容 转 化 成 一 
ngFor «li *ngFor-"let todo of todos"- 个 模板 ， 并 用 它 来 为 列表 中 的 


每 个 条 目 初 始 化 视图 . 


«div [ngSwitch]-2"someCondition"-» 


«template [ngSwitchCase] 


"caselExp"-...«/template- Le. Ki. aiia ia 

| | | 基 于 someCondition 的 当前 
ngSwitch, ngSwitchCase, «template ngSwitchCase i VÍ cr e ai » 

(BR. MN ES B PERT, 


ngSwitchDefault case2LiteralString"»...«/template» us EE u | 
有 条 件 的 切换 div 的 内 容 。 


<template ngSwitchDefault>... 


template> 


«/div» 


Angular 2 当然 也 提供 了 内 建 属 性 型 指令 ， 如 表 6.2 所 示 。 


表 6.2 内 建 属性 型 指令 


ngModel «input [(ngModel)]-"userName"- 是 供 双 回 绑 定 ， 为 表单 控件 提供 解析 和 验证 。 
«div [ngClass]-"(active:| 把 一 个 元 素 上 CSS 类 的 出 现 与 否 ， 绑 定 到 一 个 
ngClass |isActive, disabled: isDisabled)"»«/ | 真 值 映 射 表 上 。 右 侧 的 表达 式 应 该 返回 类 似 {class- 
div» name: true/false} 的 映射 表 . 


自 定义 一 个 指令 也 很 简单 ， 我 们 动手 做 一 个 。 这 个 指令 非常 简单 ， 就 是 使 任何 控件 加 上 这 个 指令 后 ， 其 点 击 动作 都 会 在 console 中 输出 “| am clicked" 。 由 于 我 们 要 监视 其 宿主 的 click 事 件 ， 所 以 我 们 
引入 了 HostListener， 在 onClick 方 法 上 用 @HostListen ('click') ， 表 明 在 检测 到 宿主 发 生 click 事 件 时 调用 这 个 方法 。 代 码 如 下 所 示 : 


HostListener 
) from 'Gangular/core'; 


QDirective(í 
selector: "[log-on-click]", 


ij 
export class LogOnClickDirective { 


constructor() {} 
QHostListener('click') 
onClick() { console.log('I am clicked!'); ] 


} 


在 模板 中 简单 写 一 句 就 可 以 看 效果 了 ， 如 图 6.25 所 示 。 


<button log-on-click>Click Me</button> 


(x d$] Elements Consoe Sources Network  Timeine Profiles » 
Awesome Todos DOC PE ntmD- 
«htal- 
> -head»..«-/head» 
| w«body cz-shortcut-listens^true"» ee $8 
v" «app-root nghost-wtx-58» 
v andl-layout ngcontent-wtx-5B8 mdl-layout-fixed-header» 
v «div class*"mdl-layout container" ng-reflect-klass*"mdl- 
layout container" ng-reflect-ng-class*"[object Object] "^ 
v «div class-"mdl-layout is-upgraded is-small-screen mdl-layout-— 


| pi >o kaadas dy omm Add Sahal mm mm pee oss Tarani 


Styles Event Listeners DOM Breakpoints. Properties 
Filter :how .cls " 
elenent,.style ( 


) 
html, body { estyle».c/style» 
font-family: "Helvetica", "Arial", sèns- 
serif; 
font-size: 14px; 
font-weight: 400; 
line-height: 20px; 


-— 9.09.0 rer Dol ee er 


margin 
border 


-> 
*"*"*""»*oovewerwevevwvee 


body 1 «style». «/style» 
width: 100%; Fier 
min-height: 1004; : 
margin: +Ê; > color 
» display 
body { user agent stylesheet|» font-family 
display: block; > font-size 
Rpt » font-weight 
i Console 
© Y op * Preserve log 
Angular 2 ís running in the developeent mode. Call 
enableProdMode() to enable the production mode. 
I an clicked! log-oen-click. directive.t$:13 
图 6.25 自 定 义 指 令 ， 使 得 点 击 按钮 会 显示 一 条 消息 
本 章 代 码 : https://github.com/wpcfan/awesome-tutorials/tree/chap06 /angular2 /ng2-tut 
打开 命令 行 工 具 使 用 git clone https:/ /github.com/wpcfan/awesome-tutorials 载 。 然 后 键入 git checkout chap06 切 换 到 本 章 代 码 。 


6.9 “小 练习 


1. 你 是 否 熟 悉 其 他 第 三 方 的 CSS 类 库 ， 比 如 Twitter 开源 的 BootStrap， 可 以 试 着 看 看 如 何 引入 进来 。 
2. 有 没有 喜欢 的 第 三 方 的 JavaScript 类 库 ， 按 我 们 提供 的 方法 看 看 是 否 可 以 引入 并 正常 工作 ? 
3. 用 Angular CLI 将 我 们 的 应 用 发 布 成 生产 环境 的 AOT 优 化 版 本 ， 打 开 Chrome 的 开发 者 工具 ， 看 看 加 载 速度 ， 和 调试 时 的 速度 做 个 对 比 。 


4. 自 己 写 一 个 管道 ， 进 行 日 期 的 一 种 特殊 转换 ， 把 日 期 转换 成 “刚刚 ”，“4 小 时 前 ”，“2 天 前 ”，“3 个 月 前 ”，“ 一 年 前 ”等 等 。 


5. 写 一 个 属性 型 指令 ， 凡 是 加 上 这 条 属性 指令 的 组 件 都 会 上 传 一 个 对 象 {id:number,name:string,action:string} 给 服务 器 。 其 中 id 是 个 自 增长 整数 ，name 是 组 件 的 名 称 ，action 是 事件 的 类 型 ， 比 如 输 
入 、 鼠 标点 击 等 等 。 看 出 来 这 是 个 简单 的 用 户 行为 采集 模型 了 吗 ? 自己 试验 一 下 看 看 怎么 做 ? 


第 7 章 ”给 组 件 带 来 活力 


本 章 的 主题 是 “专注 酷 炫 一 百年 ”;-) 其 实 ， 没 那么 夸张 ， 但 我 们 还 是 要 在 这 一 章 了 解 MDL CSS 框 架 、Angular 2 内 建 的 动画 特性 、 更 复杂 的 组 件 ， 概 括 一 下 Angular 2 的 组 件 生命 周期 。 


7.1 更 把 的 登录 页 


大 家 不 知道 有 没有 试用 过 Bing ( 必 应 ) 搜索 引擎 (在 Google 无 法 访问 的 情况 下 ，Bing 的 英文 搜索 还 是 不 错 的 选择 ) ， 这 个 搜索 引擎 的 主页 很 有 特点 : 每 日 都 会 有 一 张 非常 好 看 的 图 作为 背景 ， 见 图 
7.1。 


我 们 想 做 的 一 个 特效 是 类 似 地 页 增加 一 个 背景 ,但 更 酷 的 一 点 是 ,我 们 的 背景 每 隔 3 秒 会 自动 蔡 换 一 张 。 由 于 涉及 布局 ， 我 们 先 来 熟悉 一 下 CSS 的 框架 设计 。 


7.2 ”上 自 市 动画 技能 的 Angular 2 


Angular 2 的 目标 是 一 站 式 解 决 方案 ， 当 然 会 自 带动 画 技能 。 动 画 定义 在 @Component 描 述 性 元 数据 中 。 在 添加 动画 之 前 ， 先 引入 一 些 与 动画 有 关 的 类 库 : 


import { 
Component, 
Inject, 
trigger, 
state, 
style, 
transition, 
animate, 
OnDestroy 
) from 'Gangular/core'; 


然后 就 可 以 在 @Component 元 数据 中 添加 动画 相关 的 元 数据 了 ， 我 们 这 里 定义 了 一 个 叫 loginstate 的 动画 触发 器 (trigger) 。 这 个 触发 器 会 在 inactive 和 active 两 个 状态 间 转 换 。scale (1.1) 是 放 缩 
比例 ， 意 味 着 我 们 对 控件 做 了 1.1 倍 的 放大 。 这 个 动画 的 逻辑 就 是 ， 当 触发 器 处 于 active 状 态 时 ， 对 应 用 这 个 触发 器 状态 的 控件 做 1.1 倍 放大 处 理 : 


@Component ({ 


selector: 'app-login', 
templateUrl: './login.component.html', 
styleUrls: ['./login.component.css'], 


animations: [ 

trigger('loginState', [ 
state('inactive', style(í 
transform: 'scale(1)' 


state('active'!, style(í( 
transform: 'scale(1.1)' 


)), 
transition('inactive => active', animate('100ms ease-in')), 
transition('active => inactive', animate('100ms ease-out!)) 


我 们 刚刚 定义 了 一 个 动画 ， 但 它 还 没有 被 用 到 任何 地 方 。 要 想 使 用 它 ， 可 以 在 模板 中 用 [@triggerName]="xxx" 的 形式 来 把 它 附加 到 一 个 或 多 个 元 素 上 : 


<button 
mdl-button mdl-button-type-"raised" 
mdl-colored-"primary" 
mdl-ripple type="submit" 
[G1oginState]-"loginBtnState" 
(mouseenter)-"toggleLoginState (true)" 
(mouseleave)-"toggleLoginState (false) "> 
Login 

«/button» 


这 里 我 们 对 Login 这 个 按钮 应 用 了 loginState 触 发 器 ， 并 且 绑 定 这 个 触发 器 的 状态 值 到 一 个 成 员 变 量 loginBtnState。 而 且 我 们 定义 了 在 鼠标 进入 按钮 区 域 和 离开 按钮 区 域 时 应 该 通过 一 个 函数 
toggleLoginstate 来 改变 loginBtnstate 的 值 。 在 LoginComponent 中 定义 这 个 方法 即 可 ， 我 们 要 实现 的 这 个 功能 非常 简单 ， 一 行 代码 就 搞定 了 : 
toggleLoginState (state: boolean) { 


this.loginBtnState = state ? "active' : 'inactive'; 


} 


试 着 将 鼠标 放 在 按钮 上 和 离开 按钮 区 域 ， 看 看 按钮 的 变化 的 效果 ， 如 图 7.8 所 示 。 


图 7.8 ”鼠标 离开 和 进入 按钮 区 域 时 不 同 的 按钮 大 小 


7.3 Angular 2 动画 再 体验 


7.3.1 state 和 transition 


我 写 文章 的 习惯 是 先 试验 再 理论 ， 所 以 我 们 接 下 来 杭 理 一 下 Angular 2 提供 的 动画 技能 。 还 是 从 最 简单 的 例子 开始 ， 一 个 非常 简单 的 模板 : 


«div class-"traffic-light"» 
«/div» 


同样 非常 简单 的 样式 〈 其 实 就 是 画 一 个 小 黑 块 ) : 


.traffic-light( 
width: 100px; 
height: 100px; 
background-color: black; 


} 


现在 的 效果 就 是 这 个 样子 ， 如 图 7.9 所 示 ， 一 点 都 不 酷 啊 ， 没 关系 ， 我 们 一 点 点 来 ， 越 简单 的 越 容易 弄 懂 概念 。 


图 7.9 ”最 开始 的 小 黑 块 


下 面 我 们 为 组 件 添加 一 个 animations 的 元 数据 描述 : 


import { 
Component, 
trigger, 


) from 'Gangular/core'; 


GComponent ({ 
selector: 'app-playground', 
templateUrl: './playground.component.html', 
styleUrls: ['./playground.component.css'], 
animations: [ 
trigger('signal', [ 
state('go', style(í 
'background-color': 'green' 
)) 
] ) 
] 
}) 


export class PlaygroundComponent { 


constructor() { } 


我 们 注意 到 animations 中 接受 的 是 一 个 数组 ， 这 个 数组 里 面 我 们 使 用 了 一 个 叫 trigger 的 函数 ，trigger 接 受 的 第 一 个 参数 是 触发 器 的 名 字 ， 第 二 个 参数 是 一 个 数组 。 这 个 数组 是 由 一 种 叫 state 的 函数 和 
叫 transition 的 函数 组 成 的 。 


那么 什么 是 state? state 表 示 一 种 状态 ， 当 这 种 状态 激活 时 ，state 所 附带 的 样式 就 会 附着 在 应 用 trigger 的 那个 控件 上 。transition 又 是 什么 呢 ?tranistion 描 述 了 一 系列 动画 的 步骤 ， 在 状态 迁移 时 这 些 


动画 步骤 就 会 执行 。 


我 们 现在 的 这 个 版 本 中 暂时 只 有 state 而 没有 transition， 让 我 们 先 来 看 看 效果 ， 当 然 在 可 以 看 到 效果 前 我 们 先 要 把 这 个 trigger 应 用 到 某 个 控件 上 。 那 在 我 们 的 例子 里 就 是 模板 中 的 那个 div 了 。 


<div 
[Gsignal] —" 'go' " 
class-"traffic-light"» 


«/div» 


返回 浏览 器 ， 你 会 发 现 那个 小 黑 块 变 成 小 绿 块 了 ， 如 图 7.10 所 示 。 


图 7.10 state 的 样式 附着 在 控件 上 了 
这 说 明 什 么 ? 我 们 的 state 的 样式 附着 在 div 上 了 。 为 什么 呢 ?” 因 为 [@signal]="'go"" 定 义 了 trigger 的 状态 是 go。 但 这 一 点 也 不 酷 是 吗 ? 是 的 ， 暂 时 是 这 样 ， 还 是 那 句 话 ， 不 要 急 ，。 


接 下 来 ， 我 们 再 加 一 个 状态 stop， 在 stop 激 活 时 我 们 要 把 小 方块 的 背景 色 设 为 红色 ， 那 么 我 们 需要 把 animations 改 成 下 面 的 样子 : 


animations: [ 
trigger('signal', [ 
state('go', style(í 
'background-color': 'green' 
)), 
state('stop', style(í 
'background-color':'red' 
})) 
]) 
] 


同时 我 们 需要 给 模板 加 两 个 按钮 Go 和 Stop。 现 在 的 模板 看 起 来 是 下 面 的 样子 


«div 
[Gsignal]-"signal" 
class-"traffic-light"» 
«/div» 
«button (click)-"onGo ()"»Go«/button» 


<button (click)-"onStop()"»Stop«/button» 
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中 更 改 相应 的 状态 。 


export class PlaygroundaComponent { 
signal: string; 


constructor() { } 


onGo () { 
this.signal = 'go'; 
} 
onStop()í 
this.signal = 'stop'; 


} 
} 


现在 打开 浏览 器 ， 试 验 一 下 ， 我 们 会 发 现 点 击 Go 变 绿 ， 而 点 击 Stop 变 红 ， 如 图 7.11 所 示 。 


图 7.11 多 种 状态 切换 的 效果 


但 是 还 是 没 动 起 来 啊 ， 是 的 ， 这 是 因为 我 们 还 没 加 transition 呢 ， 我 们 只 需 把 animations 改 写 一 下 ， 你 分 别 点 Go 和 Stop 就 能 看 到 动画 效果 了 。 为 了 让 效果 更 明显 一 些 ， 我 们 为 两 种 状态 指定 一 下 高 度 。 


import í( 

Component, 

OnDestroy, 

trigger, 

state, 

style, 

transition, 

animate 

) from 'Gangular/core'; 


GComponent ({ 
selector: 'app-playground', 
templateUrl: './playground.component.html', 
StyleUrls: ['./playground.component.css'], 
animations: [ 
trigger('signal', [ 
state('void', style(i 
'transform':'translateY (-1002)' 
}) ) ， 
state('go', style(í 
'background-color': 'green', 
'height':'100px' 
)), 
state('stop', style(í 
'"background-color':'red', 
'height':'50px' 
)), 
transition('void => *', animate (5000)) 
1) 
] 
}) 


export class PlaygroundComponent { 


signal: string; 


constructor() { } 


onGo () { 
this.signal = 'go'; 
} 
onStop()í 
this.signal = 'stop'; 


} 
} 


那么 transition ('*=>*' animate (500) ) 这 名 什么 意思 呢 ?” 前 面 那个 *= >* 是 一 个 状态 迁移 表达 式 ，* 表 示 任 意 状 态 ， 所 以 这 个 表达 式 告 诉 我 们 ， 只 要 有 状态 的 变化 就 会 激发 后 面 的 动画 效果 。 后 面 的 
就 是 告诉 Angular 做 500 毫 秒 的 动画 ， 这 个 动画 默认 是 从 一 个 状态 过 渡 到 另 一 个 状态 。 现 在 大 家 打开 浏览 器 体验 一 下 ， 分 别 点 击 Go 和 Stop， 会 发 现 我 们 的 小 方块 从 一 个 正方 形变 成 一 个 长 方形 ， 红 色 变 成 绿 
色 的 过 程 。 体 验 完 之 后 再 来 看 这 句 话 : 动画 其 实 就 是 由 若干 个 状态 组 成 ， 由 transition 定 义 状 态 过 渡 的 步骤 。 


那么 下 面 我 们 介绍 一 个 void 状态 (TRS) ， 为 什么 会 有 void 状态 呢 ? 其 实 刚刚 我 们 也 体验 了 ， 只 不 过 没有 定义 这 个 void 状态 而 已 。 我 们 在 组 件 中 并 没有 给 signal 赋 初始 值 ， 这 就 意味 着 一 开始 trigger 
的 状态 就 是 void。 我 们 往往 在 实现 进 场 或 离 场 动画 时 需要 这 个 void 状态 。void 状 态 就 是 描述 没有 状态 值 时 的 状态 。 


animations: [ 
trigger('signal', [ 

state('void', style({ 

'transform':'translateY (-1002)' 

)), 

state('go', style(í 
'background-color': 'green', 
'height':'100px' 


)), 

state('stop', style(í 
'background-color':'red', 
'height':'50px' 

)), 


transition('* => *', animate (500)) 


上 面 代 码 定义 了 一 个 void 状态 ， 而 且 样 式 上 有 一 个 按 Y 轴 做 的 -100% 的 位 移 ， 其 实 这 就 是 一 开始 让 小 方块 从 场景 外 进入 场景 内 ， 这 样 就 是 实现 了 一 种 进 场 动画 ， 大 家 可 以 在 浏览 器 中 试验 一 下 。 


7.4 ”元 成 遗失 已 久 的 注册 功能 


我 们 自从 完成 了 基本 的 多 用 户 待 办 事项 后 就 没有 增加 注册 功能 ,现在 图 7.13 来 填补 这 个 缺憾 吧 。 我 们 打算 在 点 击 登录 页 的 Register 按 钮 时 弹出 一 个 注册 用 户 的 对 话 框 ， 如 图 7.13 所 示 。 
如 果 要 实现 一 个 对 话 框 ， 利 用 我 们 已 经 引入 的 angular2-mdl 库 ， 需 要 几 个 步骤 。 


我 们 需要 在 src\index.html 中 增加 一 个 “对 话 框 插座 ” (<dialog-outlet> «/dialog-outlet») ， 就 是 在 <app-root> 下 面 添加 即 可 : 


<!doctype html» 

«html» 

«head» 

http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 

</head> 

<body> 
«app-root»Loadinghttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...«/app-root» 
«dialog-outlet»«/dialog-outlet» 

</body> 

</html> 
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AU i 
Jj 
-— DL 


—— 


— 


图 7.13 我们 要 实现 的 注册 对 话 框 效 果 
建立 dialog 页 面 : angular2-mdl 中 有 很 多 方便 内 建 对 话 框 和 声明 式 方 式 ， 但 我 们 这 里 介绍 一 种 定制 化 程度 比较 高 ， 也 略 显 复杂 的 方式 。 打 开 一 个 命令 行 终端 ， 输 入 ng g c login/register-dialog., 


对 话 框 的 模板 比较 简单 ， 由 一 个 用 户 名 输入 框 、 一 个 密码 输入 框 、 一 个 重复 密码 输入 框 、 一 个 加 载 状态 和 一 个 注册 按钮 组 成 。 其 中 我 们 希望 按钮 在 表单 验证 正确 后 才 可 用 ， 而 且 在 处 理 注册 过 程 中 ， 按 
钮 应 该 不 可 用 。 在 处 理 注册 过 程 中 ， 应 该 有 一 个 用 户 提 示 : 


«form [formGroup]-"form"» 
<h3 class-"mdl-dialog title"»Registerc«/h3» 
«div class-"mdl-dialog content" 
«mdl-textfield 
ffirstElement 
type="text" 
label="Username" 
formControlName="username" 
Floating-label» 
«/mdl-textfield» 
<br/> 
«mdl-textfield 
type="password" 
label-"Password" 
formControlName-"password" 
Floating-label» 
«/mdl-textfield» 
<br/> 
«mdl-textfield 
type="password" 
label="Repeat Password" 
formControlName-"repeatPassword" 
Floating-label» 
«/mdl-textfield» 
«/div» 
«div class-"status-bar"» 
<p class-"mdl-color-text--primary"»[((statusMessage)])«/p» 
«mdl-spinner [active]-2"processingRegister"»«/mdl-spinner» 
«/div» 
«div class-"mdl-dialog  actions"» 
«button 


type="button" 


mdl-button 
(click)-2"register()" 
[disabled]-"!form.valid || processingRegister" 
mdl-button-type-"raised" 
mdl-colored-"primary" mdl-ripple» 
Register 
«/button» 
«/div» 
</form> 


那么 对 应 的 组 件 文件 中 ， 我 们 


My AN aS 


1 这/ 从) 又 


有 使 用 双向 绑 定 ， 而 是 完 


: FormBuilder: 这 其 实 是 一 个 工具 类 ， 用 于 快速 构造 一 个 表单 。 


: FormGroup: 顾 名 思 


态 也 是 失败 的 。 


FormControl: 跟踪 表单 控件 的 值 和 验证 状态 。 


这 是 一 组 表单 控件 ， 一 个 表单 可 以 有 多 个 FormGroup， 


采取 表单 的 方式 进 


里 介绍 几 个 新 面孔 : 


这 常常 在 比较 复杂 的 表单 中 使 用 ， 用 于 更 好 地 分 类 和 和 控制。 如果 这 一 组 中 的 任何 一 个 控件 验证 失败 ，FormGroup 的 验证 状 


Angular 2 的 FormControl 中 内 置 了 常用 的 验证 器 (Validator) ， 我 们 在 这 个 例子 中 除 此 之 外 还 给 出 了 一 个 自 定义 的 验证 器 passwordMatchValidator， 用 于 判断 是 否 两 次 密码 输入 是 相同 的 。 


此 外 ， 我 们 还 用 到 了 一 个 新 修 


饰 


人 大全- 


fT Q HostListener, 


// 省 略 掉 Import 代 码 段 和 修饰 符 代 码 段 


http: //www.hzcourse.com/resource/readl 
cerDialogComponent( 
ild('firstElement') private input 


export class Regis! 


QViewCh 


public 


form: FormGroup; 


public processingl 
statusMessage = ''; 


public 


Register = false; 


private subscription: Subscription; 


constru 


prival 


ctor( 


private fb: FormBuilder, 
private router: Router, 
QGInject('auth') private authService) ( 
this.form = fb.group(í 
'username': new FormControl('', Valida 
'passwords': fb.group(í 
'password': new FormControl('', Valida 
'repeatPassword': new FormControl('', 


),(validator: this.passwordMatchVa 


p)? 
// 


this.dialog.onHide().subscribe( 


te dialog: MdlDialogReference, 


just if you want to be informed 


Element: MdlTextFieldComponent; 


tors.required), 


tors.required), 


(auth) 


console.log('login dialog hidden'); 


p)? 


f (auth) { 


Validators .required) 


lidator}) 


if the dialog is hidden 
=> { 


console.log('authenticated user', auth); 


this.dialog.onVisible().subscribe( 


); 
} 


this.inputElement.setFocus (); 


passwordMatchValidator (group: FormGroup) { 
this.statusMessage = ''; 
let password = group.get('password').value; 
let confirm = group.get('repeatPassword').value; 
// Don't kick in until user touches both fields 
if (password.pristine || confirm.pristine) { 
return null; 
} 
if(password---confirm) { 
return null; 
} 
return ('mismatch': true); 
} 
public register() { 
this.processingRegister = true; 
this.statusMessage = 'processing your registration http://www.hzcourse.com/resource/readl 
this.subscription = this.authService 
.register( 
chis.form.get('username').value, 
chis.form.get('passwords').get('password').value) 
.Subscribe( auth => { 
this.processingRegister False; 


this.statusMessage 


setTimeout( () => 


this.dialog.hide 


), 500); 
), err => { 


{ 


(a 


uth); 


this.router.navigate(['todo']); 


is.processingRegister - false; 


this.statusMessage - 


rr.message; 


QHostListener ('keydown.esc') 


public 


onEsc(): void { 


if(this.subscription ! 
this.subscription.unsubscribe (); 


this.dialog.hide(); 


} 
} 


undefined) 


P2 


{ 


做 完 后 ， 打 开 浏 览 器 却 发 现 报错 了 ， 如 图 7.14 所 示 。 
中 引入 这 个 模块 。 


这 是 


Book?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/... 


'you are registered and will be signed in http://www.hzcourse.com/resource/readl 


Book?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...'; 


这 个 修饰 符 是 指 我 们 要 监听 宿主 (这 里 是 浏览 器 ) 的 某 些 动作 和 变化 。 比 如 本 例 中 ， 我 们 想 要 用 户 在 按 Esc 键 时 关闭 对 话 框 ， 但 这 个 动作 并 不 局 限 在 
某 个 控件 上 ， 只 要 用 户 点 击 了 Esc 我 们 就 关闭 对 话 框 ， 这 时 我 们 就 得 监听 宿主 的 keydown.esc 事 件 了 : 


EBPS/Text/. 


Book?path-/openresources/teach ebook/uncompressed/16136/0l 


由 于 我 们 未 引入 ReactiveFormsModule 造 成 的 ，FormGroup 是 由 ReactiveFormsModule 提 供 的 ， 因 此 要 在 src\app\login\login.module.ts 


W9 4 Unhandled Promise rejection: Template parse errors: 

Can't bind to 'formGroup' since it isn't a known property of 'form'. (“<form [ERROR -»][formGroup]-"form"» 
«h3 classs"mdl-dialog title"»Register«/h3» 
«div classs"mdl-dialog content"): RegisterDialogComponent(9e:6 

No provider for ControlContainer ("[ERROR -»]«form [formGroup]= form > 
«h3 classs"mdl-dialog title"»Register«/h3» 
«div class-"mdl-dialog c"): RegisterDialogComponent(9e:o 

No provider for NgControl (" 


«h3 class-"mdl-dialog title"»Register«/h3» 
«div class-"mdl-dialog content"» 
[ERROR -»]«mdl-textfield 
stfirstElement 
type="text" 
"): RegisterDialogComponent@3:4 
No provider for ControlContainer (" 


图 7.14 未 引入 ReactiveForms 引 起 的 报错 


7.5 ”响应 式 表 单 


刚才 我 们 只 是 利用 响应 式 表 单 (Reactive Forms) 做 了 一 些 工作 ， 但 为 什么 这 么 做 ， 以 及 应 该 怎么 做 ,我 们 还 不 是 特别 清楚 。 但 是 实践 之 后 再 来 具体 讲 感觉 效果 会 比较 好 。 接 下 来 我 们 来 学 习 一 下 响应 
式 表 单 。 


响应 式 表单 意味 着 我 们 不 会 使 用 hgModel，required 等 其 他 的 类 似 的 指令 来 帮助 我 们 完成 绑 定 和 验证 等 动作 。 也 就 是 说 我 们 希望 自己 对 表单 (Form) 有 完全 的 控制 ， 而 不 是 像 我 们 之 前 做 的 那样 (第 2 
章 ) : 模板 驱动 型 的 表单 是 一 个 以 模板 的 形式 让 Angular 2 帮 有 我 们 打 理 一 切 的 方法 。Angular 2 的 响应 式 表单 有 两 个 明显 优点 : 


. 可 以 让 我 们 将 所 有 处 理 的 逻辑 放 在 一 起 ， 而 不 是 像 非 响应 式 表单 那样 ， 验 证 在 网 页 模板 中 ， 绑 定 在 模板 中 ， 逻 辑 处 理 在 组 件 中 等 等 。 
` 更 大 的 灵活 性 ， 因 为 我 们 可 以 从 头 到 脚 的 控制 表单 ， 而 不 是 依赖 某 些 内 建 的 机 制 〈 虽 然 那 些 机 制 有 时 会 给 你 很 多 便利 之 处 ， 但 一 旦 你 的 需求 变 复杂 时 ， 它 就 无 法 满足 你 了 ) 。 
从 一 个 小 例子 开始 ， 下 面 的 表单 是 我 们 练习 中 需要 用 到 的 。 但 请 注意 ， 为 了 更 清晰 更 简单 ， 本 小 节 的 代码 不 要 使 用 todos 项 目 ， 请 单独 建 一 个 项 目 目录 来 实践 下 面 的 练习 。 


假设 我 们 有 一 个 基本 HTML 版 的 orm 如 下 所 示 : 


«form» 
«label» 
Xspan»Full name</span> 
«input 
type="text" 
name="name" 
placeholder="Your full name"> 
</label> 
<div> 
«label» 
«span»Email address«/span» 
«input 
type-"email" 
name-"email" 
placeholder-"Your email address"» 


«/label» 
«label» 
«span»Confirm address«/span» 
«input 
type-"email" 
name-"confirm" 
placeholder-"Confirm your email address"» 
«/label» 
«/div» 
<button type-"submit"»Sign up«/button» 
</form> 


我 们 有 三 个 输入 项 : 用 户 姓名 和 一 组 用 户 email 地 址 输入 项 (包含 email 和 确认 email 两 项 ) 。 我 们 使 用 响应 式 表单 去 要 做 的 事情 有 : 
: 绑 定 用 户 的 姓名 、email 以 及 确认 email 的 输入 。 

. 对 于 所 有 必 填 项 的 验证 。 

. 显示 必 填 项 验证 失败 的 信息 。 

“ 在 表单 合法 前 (所 有 了 验证 通过 叫做 合法 ) 禁用 提交 按钮 。 

. 提交 表单 。 


对 应 的 ， 我 们 要 实现 一 个 用 户 的 接口 定义 : 


// user.interface.ts 
export interface User ( 
name: string; 
account: { 
email: string; 
confirm: string; 
} 
} 


在 我 们 可 以 使 用 ReactiveForms 前 ， 首 先 要 告诉 @NgModule 引 入 。 注 意 : 平时 使 用 时 如 果 要 使 用 模板 驱动 型 表单 需要 引入 FormModule， 而 响应 式 表单 需要 引入 ReactiveForms。 


import { ReactiveFormsModule } from 'Gangular/forms'; 


&NgModule ({ 
imports: [ 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/..., 
ReactiveFormsModule 


l, 
declarations: [http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16136/0EBPS/Text/...], 
bootstrap: [http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...] 


)) 
export class AppModule {} 


让 我 们 从 一 个 注册 组 件 开 始 ， 这 个 注册 组 件 束 是 下 面 的 样子 : 


// form-demo.component.ts 
import { Component, OnInit } from '@angular/core'; 
import í( 
FormControl, 
FormGroup, 
FormBuilder 
) from 'Gangular/forms'; 


GComponent ({ 
selector: 'app-form-demo', 
templateUrl: './form-demo.component.html', 
styleUrls: ['./form-demo.component.css'] 


)) 


export class FormDemoComponent implements OnInit { 


constructor() { } 


ngOnInit() ( 
} 


这 看 起 来 就 是 一 个 很 普通 的 组 件 ， 接 下 来 我 们 会 开始 学 习 什 么 是 FormControl， 什 么 是 FormGroup 以 及 什么 是 FormBuilder。 


7.6 Angular 2 的 组 件 生命 周期 


每 个 组 件 都 有 一 个 被 Angular 管 理 的 生命 周期 : Angular 创 建 、 泻 染 控件 ; 创建 、 演 染 子 控件 ; 当 数 据 绑 定 属性 改变 时 做 检查 ; 在 把 控件 移 除 DOM 之 前 销毁 控件 等 等 。 


Angular 提 供 生命 周 期 的 “钩子 ” (Hook) 以 便于 开发 者 可 以 得 到 这 些 关 键 过 程 的 数据 以 及 在 这 些 过 程 中 做 出 响应 的 能 力 。 这 些 浮 数 和 顺序 可 参见 图 7.20， 应 用 范围 和 触发 时 机 等 信息 参见 表 7.2。 


constructor 
ngOnChanges 
ngOninit 
ngDoCheck 
ngAfterContentlnit 
ngAfterContentChecked 
ngAfterViewilnit 


ngAfterViewChecked 


ngOnbDestory 


函数 目的 和 触发 时 机 

f£ nglInit 之 前 触发 ， 当 Angular 设置 数据 绑 定 属性 或 输入 性 属性 
时 会 得 到 一 个 包含 当前 和 之 琢 属 性 人 的 对 象 (SimpleChanges) 

只 调用 一 次 ,在 设置 完 竹 入 性 属性 后 ， 通 过 这 个 函数 初始 化 组 件 
或 指令 
agDoCheck 组 件 和 指令 在 Ege d ja i fj ^ id. 测 到 变化 时 触发 ， 可 以 在 此 检查 一 些 

angular 上 月 且 无 法 检查 的 变化 

在 ngDoCheck 后 触发 ， 只 调用 一 次 ， 把 要 站 载 到 组 件 视图 的 内 容 
初始 化 后 

ngAfterContentInit 之 后 每 次 ngDoCheck 都 会 在 之 后 ai ^ ngAfter- 
ContentChecked, X ZZ 2H PFR RIAI AN EIE T Ey x 

在 第 一 个 ngAfterContentInit 被 调用 后 和 触发， 只 调用 一 次 ， 在 
angular 49] 4r (e £9 Jr We] Jw 
ngAfterViewChecked TE ngAfterViewInit 后 及 每 个 ngAfterContentChecked 后 触发 

在 组 件 或 指令 被 销毁 前 ， 清 理 环境 ， 可 以 在 此 处 取消 Observable 
的 订阅 


ngOnChanges 组 件 和 指令 


ngOnInit 组 件 和 指令 


ngAfterContentInit 


ngAfterContentChecked 


ngAfterViewInit 


ngOnDestroy 组 件 和 指令 


虽 令 也 有 类 似 的 生命 周期 “钩子 ”函数 ， 除 了 一 些 组 件 特有 的 函数 外 。 


下 面 这 段 代 码 展现 了 如 何 利 用 ngOnlnit 这 个 钩子 函数 : 


export class PeekABoo implements OnInit { 
constructor (private logger: LoggerService) ( } 


// implement OnlInit's 'ngOnInit' method 
ngOnlInit() ( this.logIt('OnInit'); ) 


logIt (msg: string) { 
this.logger.log('4$(nextId-4) ${msg}'); 
} 


钩子 函数 的 接口 〈 比 如 上 面 例子 中 的 Onlnit) 从 纯 技术 的 角度 来 说 不 是 必须 的 ， 这 是 由 于 JavaScript 本 身 没有 接口 这 个 概念 ， 而 TypeScript 最 终 是 转换 成 JavaScript 的 。 


Angular 其 实 是 通过 检查 指令 或 组 件 的 类 中 是 否定 义 了 相关 方法 来 进行 的 ， 比 如 上 面 例子 中 即使 不 实现 OnInit 接 口 ， 只 要 定义 了 ngOnInit() 方 法 ，Angular 就 会 在 对 应 的 生命 周期 调用 这 个 方法 。 但 是 还 
是 推荐 大 家 使 用 接口 ， 因 为 强 类 型 会 给 我 们 带 来 其 他 好 处 。 


本 章 代 码 : https://github.com/wpcfan/awesome-tutorials/tree/chap07/angulat2/ng2-tut 


打开 命令 行 工 具 使 用 git clone https://github.com/wpcfan/awesome-tutorials 载 。 然 后 键入 git checkout chap07 切 换 到 本 章 代 码 。 


7.7 小 练习 


1. 练 习 更 多 组 动 浮 数 动画 效果 ， 请 尝试 自己 做 一 个 小 球 从 空中 掉 落 ， 越 弹 越 低 直 至 最 终 停止 的 动画 。 可 以 到 http://easings.net/ 参 考 各 种 缓 动 函 数 。 
2. 练 习 更 多 关键 帧 动画 效果 ， 试 着 自己 做 一 个 抛物 线 动画 ， 想 想 怎 么 做 ? 


3. 用 json-sever 做 一 个 Web API， 自 己 试 着 用 Postman 访 问 各 个 AP1， 熟 悉 其 中 的 操作 和 观察 操作 结 


第 8 章 。Rx 一 一 隐藏 在 Angular 中 的 利 剑 


Rx (Reactive Extension， 响 应 式 扩展 ， 参 见 http://reactivex.io) 最 近 在 各 个 领域 都 非常 火 。 其 实 Rx 是 微软 在 好 多 年 前 针对 C# 写 的 一 个 开源 类 库 ， 但 好 多 年 都 不 温 不 火 ， 一 直到 Netflix 针 对 Java 平 台 
做 出 了 RxJava 版 本 后 才 在 开源 社区 受到 追捧 。 


这 里 还 有 个 小 故事 ，Netflix 之 所 以 做 RxJava 完 全 是 一 个 偶然 。 个 中 缘由 是 由 于 Netflix 的 系统 越 做 越 复杂 ， 大 家 都 绞 尽 脑汁 琢磨 怎么 才能 从 这 些 复杂 逻辑 的 地 狱 中 把 系统 拯救 出 来 。 ， 一 个 从 微软 跳 
槽 过 来 的 员工 和 主管 说 ， 我 们 原来 在 微软 做 的 一 个 叫 Rx 的 东 东 挺 好 ， 可 以 非常 简单 地 处 理 这 些 逻 辑 。 主 管理 都 没 理 ， 心 想 微软 那 套 东西 肯定 又 爱 肿 又 不 好 用 ， 从 来 没 听 说 过 微软 有 什么 好 的 开源 产品 。 但 那 
位 前 微软 员工 铀 而 不 舍 ， 非 常 执着 ,不 断 和 组 内 员工 和 主管 游说 ， 宣 传 这 个 Rx 思想 有 多 和牛。 终于 有 一 天 ， 大 家 受 不 了 了 ,， 说， 这 么 着 吧 ， 给 你 个 机 会 ， 你 给 大 家 仔细 讲 讲 Rx， 我 们 讨论 看 看 到 底 适 不 适合 
于 是 他 一 番 言 语 ， 把 大 家 都 惊 住 了 ， 微 软 竟然 有 这 么 好 的 东西 。 但 是 这 东西 是 .NET 的 ， 怎 么 办 呢 ? 那 就 写 一 个 吧 。 


八卦 讲 完 ， 进 入 正题 ， 什 么 叫 响应 式 编 程 呢 ?这 里 引用 一 下 Wikipedia 的 解释 : 


在 计算 领域 ， 响 应 式 编程 是 一 种 面向 数据 流 和 变化 传播 的 编程 范式 。 这 意味 着 可 以 在 编程 语言 中 很 方便 地 表达 静态 或 动态 的 数据 流 ， 而 相关 的 计算 模型 会 自动 将 变化 的 值 通过 数据 流 进 行 传播 。 


这 都 说 的 什么 啊 ” 没 关系 ， 概 念 永远 是 抽象 的 ， 我 们 来 举 几 个 例子 。 比 如 在 传统 的 编程 中 ，a= b+ c 表 示 将 表达 式 的 结果 赋 给 a， 而 之 后 改变 b 或 c 的 值 不 会 影响 a。 但 在 响应 式 编 程 中 ，a 的 值 会 随 着 b 或 < 
的 更 新 而 更 新 。Rx 学 习 曲 线 比 较 陡峭 ， 所 以 这 一 章 篇 幅 比较 长 ， 我 们 尽量 对 于 每 一 个 概念 都 举例 说 明 ， 和 希望 可 以 帮 你 理解 。 


图 8.1 是 传统 编程 ， 没 什么 好 说 的 ， 尽 管 b、 < 变化 了 ， 但 是 肯定 不 会 影响 a 的 。 


JavaScript * Console 


var a,b-1,c-2; "þ=1" 
a=b+c; 

console. log('b=' "c=72" 
console. log('c=" | 

console. log('a=' "4-23" 
bz3; 

c=2, 
console.log('a-' 


"Ha4-3" 


图 8.1 传统 编程 中 的 a=b+c 


那么 用 响应 式 编程 方法 写 出 来 如 图 8.2 所 示 ， 可 以 看 到 ， 随 着 b 和 <c 的 变化 ，a 也 会 随 之 变化 。 


ES6 / Babel * Console 


var b$ = Rx.Observable.from([1,3]); "nba" 
var c$ - Rx.Observable.from([2,2]); 
Lf er Li 
var a$ = Rx.Observable.zip(b$, c$, (b,c) => { 
console. log('b='+b): "a=3" 
console. log('c='+c); 
return b+c; 


1); 


"nz3" 


"ne-2n 


a$.subscribe(a-» console.log('a-'*a)); 


"az5" 


图 8.2 ”响应 式 编程 版 本 的 a=b+c 
看 出 来 一 些 不 一 样 的 思维 方式 了 吗 ” 响 应 式 编程 需要 描述 数据 流 ， 而 不 是 单个 点 的 数据 变量 ， 我 们 需要 把 数据 的 每 个 变化 汇聚 成 一 个 数据 流 。 如 果 说 传统 编程 方式 基于 离散 的 点 ， 那 么 响应 式 编 程 就 是 
£x. 
上 面 的 代码 虽然 很 短 ， 但 体现 出 Rx 的 一 些 特 点 : 
' Lamda 表 达 式 ， 就 是 那个 看 上 去 像 箭 头 的 东西 =>。 你 可 以 把 它 想象 成 一 个 数据 流 的 指向 ， 我 们 从 箭头 左 方 取得 数据 流 ， 在 右 方 做 一 系列 处 理 后 输出 成 另 一 个 数据 流 或 者 做 一 些 其 他 对 于 数据 的 操作 。 


` 操作 符 : 这 个 例子 中 的 from、2zip 都 是 操作 符 。Rx 中 有 太 多 的 操作 符 ， 从 大 类 上 讲 分 为 : 创建 类 操作 符 、 变 换 类 操作 符 、 过 滤 类 操作 符 、 合 并 类 操作 符 、 错 误 处 理 类 操作 符 、 工 具 类 操作 符 、 条 件 型 操 


作 符 、 数 学 和 聚集 类 操作 符 、 连 接 型 操作 符 ， 等 等 。 


8.1 ”Rx 由 体验 


还 是 从 例子 开始 ， 我 们 逐渐 地 来 熟悉 Rx。 为 了 更 直观 地 看 到 Rx 的 效果 ， 推 荐 大 家 去 JSBin 这 个 在 线 Javascript IDE http://jsbin.com 去 实验 下 面 的 练习 。 这 个 IDE 非 常 方便 ,一 共有 5 个 功能 窗口 : 
HTML、CSS、JavaScript、Console 和 Output， 如 图 8.3 所 示 。 


HTML | CSS ES6/Babel Console Output 


ES6 / Babel * Console 


let todo * document.getElementById('todo'); "I^" 
let input$ = Rx.Observable.fromEvent(todo, 'keyup'); 
input$.subscribe(input => console.log(input.target.value)); "12" 


«meta charset-"utf-8"» 
«meta names"yiewport" contents"w "123" 
«title»JS Bin«/title» 
«script srce"https: //unpkg.com/& "1234" 


图 8.3 JSBin4E IDE 


首先 在 HTML 中 引入 Rx 类 库 ， 然 后 定义 一 个 id 为 todo 的 文本 输入 框 : 


<!DOCTYPE html» 
«html» 
«head» 

«meta charset-"utf-8"» 

«meta name-"viewport" content-2"width-device-width"» 

«title»JS Bin«/title» 

«script src-"https://unpkg.com/Qreactivex/rxjs85.0.0-beta.7/dist/global/Rx.umd.js"»«/script» 
</head> 
<body> 
<input id="todo" type="text"/> 
</body> 
</html> 


在 JavaScript 标 签 中 选择 ES6/Babel， 因 为 这 样 可 以 直接 使 用 ES6 的 语法 ， 在 文本 框 中 输入 以 下 javascript。 在 RxJS 领 域 ,一 般 在 Observable 类 型 的 变量 后 面 加 上 $ 标 识 ， 这 是 一 个 “ 流 变量 ” (由 英文 
Stream 得 来 ，Observable 就 是 一 个 Stream， 所 以 用 $ 标 识 ) ， 不 是 必须 的 ， 但 是 属于 约定 俗 成 。 


let todo = document.getElementById('todo'); 
let input$ = Rx.Observable.fromEvent (todo, 'keyup'); 
input$.subscribe (input => console.log(input.target.value)); 


如 果 Console 窗 口 默认 没有 打开 ， 请 点 击 Console 标 签 ， 然 后 选中 右 侧 的 Run with JS 旁边 的 Auto-run JS 复 选 框 。 在 Output 窗 口中 应 该 可 以 看 到 一 个 文本 输入 框 ， 在 这 个 输入 框 中 输入 任意 要 试验 的 字 
符 ， 观 察 Console， 如 图 8.4 所 示 。 


Console Clear Jutpu RunwithJS| Auto-runJS M 
"1" 
"19? n 


"123" 


"1234" 


图 8.4  ConsolefeOutput 4 v 


这 几 行 代码 很 简单 : 首先 我 们 得 到 HTML 中 id 为 todo 的 输入 框 对 象 ， 然 后 定义 一 个 观察 者 对 象 将 todo 这 个 输入 框 的 keyup 事 件 转换 成 一 个 数据 流 ， 最 后 订阅 这 个 数据 流 并 在 console 中 输出 我 们 接收 到 
的 input 事 件 的 值 。 我 们 从 这 个 例子 中 可 以 观察 到 几 个 现象 。 


` 数据 流 : 你 每 次 在 输入 框 中 输入 时 都 会 有 新 的 数据 被 推送 过 来 。 本 例 中 ， 你 会 发 现 连 续 输 入 “1，2，3，4 ”， 在 console 的 输出 是 “1，12，123，1234”， 也 就 是 说 ， 每 次 keyup 事 件 我 们 都 得 到 了 完整 
的 输入 框 中 的 值 。 而 且 这 个 数据 流 是 无 限 的 ， 只 要 我 们 不 停止 订阅 ， 它 就 会 一 直 在 那里 待命 。 


: 我 们 观察 的 是 todo 上 发 生 的 keyup 这 个 事件 ， 那 如 果 我 一 直 按 着 某 个 键 不 放 会 怎么 样 呢 ? 你 的 猜测 是 对 的 ， 一 直 按 着 的 时 候 ， 数 据 流 没有 更 新 ， 直 到 你 松 开 按键 为 止 〈 你 看 到 蕉 图 里 面 有 两 条 一 模 一 样 
的 含有 多 个 5 的 数据 ， 因 为 我 用 Sutrface Pro 堆 图 时 快捷 键 也 被 截获 了 ， 但 由 于 是 控制 键 所 以 文字 内 容 没有 改变 ) ， 如 图 8.5 所 示 。 


Console Clear Run with JS] Auto-run JS 


"1" 555555555555555555] x 


n 12" 


"n 123 " 


"1234" 


71234555555555585555555" 


"1234555555555555555555' 


图 8.5 ”一 直 按 着 数字 键 5 不 放 ， 几 秒 之 后 的 输出 


如 果 观 察 得 足够 仔细 ， 你 会 发 现 console 中 输出 的 值 其 实 是 input.target.value， 我 们 观察 的 对 象 其 实 是 jd 为 todo 的 这 个 对 象 上 发 生 的 keyup 事 件 (Rx.Observable.fromEvent (todo,keyup') ) . BB 
么 在 订阅 的 代码 段 中 input 其 实 是 keyup 事 件 才 对 。 我 们 看 看 到 底 是 什么 ， 将 console.log (input.target.value) 改写 成 console.log (input) ， 看 看 会 怎样 呢 ? 是 的 ， 我 们 得 到 的 确实 是 KeyboardEvent， 
如 图 8.6 所 示 。 


Console Auto-run J5 E 


[object KeyboardEvent| { 
altKey: false, 
Al IARGET? 2, 
bubbles: true, 
BUBBLING PHASE: 3, 
cancelable: true, 
cancelBubble: false, 
LAPIURING PHASE: 1, 
char: "1", 
charCode: 8, 
ctrlKey: false, 
currentlarget: [object 
HTMLInputElement] 1 
accept; "'", 
accessKey; "", 
addEventListener: function 
addEventl istener() { [native 
code] }, 
align: "", 
abc; "rr. 
appendChild: function 
appendChild() [ [native code] }, 
ATTRIBUTE NODE: 2, 
attributes: [object 
NamedNodeMap] { ... 1], 
autocomplete: "*, 
autofocus: false, 
baseURI: 


图 8.6 ”事件 被 输出 到 Console 


不 太 过 疗 ?》 那 么 我 们 再 来 做 几 个 小 练习 ， 首 先 将 代码 改 成 下 面 的 样子 ， 其 实 不 用 讲 ， 你 应 该 也 可 以 猜 得 到 ， 这 是 要 过 滤 出 keyCode=32 的 事件 ，keyCode 是 AsCll 码 ， 那 么 这 就 是 要 把 空格 滤 出 来 : 


let todo = document.getElementById('todo'); 

let input$ = Rx.Observable.fromEvent(todo, 'keyup'); 
input$ 
.filter (ev-»ev.keyCode---32) 
. subscribe (ev-»console.log(ev.target.value)); 


结果 我 们 看 到 了 ， 按 数字 键 1，2，3，4，5，6，7，8，9 都 没有 反应 ， 直 到 按 了 空格 键 ， 触 发 的 数据 流 如 图 8.7 所 示 。 


Console CI ar | Run v ith JS. Auto-run JS EZ 


"123456789 " [122456780 | 


图 8.7 ”只 在 空格 键 抬 起 时 触发 的 数据 流 


你 可 能 一 直人 在 奇怪 ， 我 们 最 终 只 对 输入 框 的 值 有 兴趣 ， 能 不 能 让 数据 流 只 传 值 过 来 呢 ? 当然 可 以 ， 使 用 map 这 个 变换 类 操作 符 就 可 以 完成 这 个 转换 了 : 


let todo = document.getElementById('todo'); 
let input$ = Rx.Observable.fromEvent(todo, 'keyup'); 


input$ 
.map (ev-»ev.target.value) 
. subscribe (value-»console.log(value)); 


map 这 个 操作 符 做 的 事情 就 是 允许 你 对 原 数据 流 中 的 每 一 个 元 素 应 用 一 个 国 数 ， 然 后 返回 并 形成 一 个 新 的 数据 流 ， 这 个 数据 流 中 的 每 一 个 元 素 都 是 原来 数据 流 中 的 元 素 应 用 函数 后 的 值 。 比 如 下 面 的 例 
子 ， 对 于 原 数据 流 中 的 每 个 数 应 用 一 个 国 数 10*x， 也 就 是 扩大 了 10 倍 ， 形 成 一 个 新 的 数据 流 ， 如 图 8.8 所 示 。 


图 8.8 ”map 变换 操作 符 


8.2 ” 单 见 操作 


最 常见 的 两 个 操作 符 我 们 上 面 已 经 了 解 了 ， 我 们 继续 再 来 认识 新 的 操作 符 。 类 似 .map (ev=>ev.target.value) 的 场景 太 多 了 ， 以 至 于 RxJS 团 队 设 计 出 一 个 专门 的 操作 符 来 应 对 ， 这 个 操作 符 就 是 


pluck。 这 个 操作 符 可 以 从 一 系列 嵌 套 的 属性 中 把 值 提 取出 来 ， 形 成 新 的 流 。 比 如 上 面 的 例子 可 以 改写 成 下 面 的 代码 ， 效 果 是 一 样 的 。 那 么 如 果 其 中 某 个 属性 为 空 怎么 办 ? 这 个 操作 符 负 责 返 回 一 个 
undefined 作 为 值 加 入 流 中 。 


let todo = document.getElementById('todo'); 

let input$ = Rx.Observable.fromEvent(todo, 'keyup'); 
input$ 
.pluck('target', 'value') 

. subscribe (value-»console.log(value)); 


下 面 我 们 稍微 给 我 们 的 页 面 加 点 料 ， 除 了 输入 框 再 加 一 个 按钮 : 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«meta name-"viewport" content-2"width-device-width"» 
«title»JS Bin«/title» 
«script src-"https://unpkg.com/Qreactivex/rxjs85.0.0-beta.7/dist/global/Rx.umd.js"»«/script» 
</head> 
<body> 
<input id="todo" type="text"/> 
<button id="addBtn">Add</button> 
</body> 
</html> 


在 JavaScript 中 用 同样 的 方法 得 到 按钮 的 DOM 对 象 以 及 声明 对 此 按钮 点 击 事件 的 观察 者 : 


(D 


t addBtn = document.getElementById('addBtn'); 
let buttonClick$ = Rx.Observable 

.fromEvent (addBtn, 'click') 

.mapTo ('clicked'); 


由 于 点 击 事件 没有 什么 可 见 的 值 ， 所 以 我 们 利用 一 个 操作 符 ( 叫 mapTo) 把 对 应 的 每 次 点 击 转换 成 字符 clicked。 其 实 它 也 是 一 个 map 的 简化 操作 ， 如 图 8.9 所 示 。 


Console Cles Outpu | Run with JS | Auto-run JS £ 


"clicked" 


"clicked" 


"clicked" 


图 8.9 ”mapTo 操 作 符 将 每 次 点 击 转换 成 一 个 字符 clicked 


8.3 Angular 2 中 的 内 建文 持 


Angular 2 中 对 于 Rx 的 支持 是 怎么 样 的 呢 ? 先 试验 一 下 吧 ， 简 单 粗 暴 的 一 个 组 件 模 板 页 面 : 


<p> 
{ {clock}} 
</p> 


和 在 组 件 中 定义 一 个 简单 粗暴 的 成 员 变 量 : 


import { Component ) from 'Gangular/core'; 


import ( Observable ) from 'rxjs/Observable'; 
import 'rxjs/add/observable/interval'; 
GComponent ( 


selector: 'app-playground', 

templateUrl: './playground.component.html', 

styleUrls: ['./playground.component.css'] 
)) 
export class PlaygroundComponent { 

clock = Observable.interval (1000); 


constructor() { } 


搞定 ! 打开 浏览 器 ,显示 了 一 个 [object Object] ( 见 图 8.36) , %8. 


Awesome Todos 


图 8.36 ”直接 把 Observable 对 象 显 示 在 页 面 中 的 效果 : 哈 也 没有 


当然 经 过 前 面 的 学 习 ， 我 们 知道 Observable 是 个 异步 数据 流 ， 我 们 可 以 把 代码 改写 一 下 ， 在 订阅 方法 中 去 赋值 就 一 切 ok 了 ， 运 行 结 果 见 图 8.37。 


import { Component ) from 'Gangular/core'; 


impor! 
impor! 


( Observable ) from 'rxjs/Observable'; 
'rxjs/add/observable/interval'; 


GComponent ({ 
selector: 'app-playground', 
templateUrl: './playground.component.html', 
styleUrls: ['./playground.component.css'] 
}) 
export class PlaygroundComponent{ 
clock: number; 


constructor() { 
Observable.interval (1000) 
.Subscribe (value => this.clock- value) 


Awesome Todos 


图 8.37 ”利用 subsctibe 赋 值 成 功 显示 的 效果 


但 是 这 样 做 还 是 有 一 个 问题 ， 我 们 加 入 一 个 do 操作 符 ， 在 每 次 订阅 前 去 记录 就 会 发 现 一 些 问 题 。 当 我 们 离开 页 面 再 回来 ， 每 次 进入 都 会 创建 一 个 新 的 订阅 ， 但 原 有 的 没有 释放 : 


Observable.interval (1000) 
.do( => console.log('observable created')) 


.sSubscribe (value => this.clock- value); 


观察 console 中 在 'observable created 之 前 的 数字 和 页 面 显 示 的 数字 ， 大 概 是 页 面 每 增加 1，console 的 数字 增加 2， 这 说 明 我 们 后 面 运行 着 2 个 订阅 ， 如 图 38.38 所 示 。 


Awesome Todos 


Angular 2 is running ín the development mode. Call 
enableProdMode() to enable the production mode. 


Q) observable created playground. component, t$: 18 


Angular 2 is running in the development mode. Call 120n9.15:98 
enableProdMode() to enable the production mode. 


E observable created playground,component. t$;28 


> 


图 8.38 原 有 的 订阅 没有 释放 掉 
原因 是 我 们 没有 在 页 面 销 毁 时 取消 订阅 ， 那 么 我 们 利用 生命 周期 的 onDestroy 来 完成 这 一 步 : 


import { Component, OnDestroy } from 'Gangular/core'; 


import ( Observable ) from 'rxjs/Observable'; 
import { Subscription ) from 'rxjs/Subscription'; 
import 'rxjs/add/observable/interval'; 


GComponent ({ 
selector: 'app-playground', 
templateUrl: './playground.component.html', 
styleUrls: ['./playground.component.css'] 

)) 

export class PlaygroundComponent implements OnDestroy( 
clock: number; 
subscription: Subscription; 


constructor() { 
this.subscription = Observable.interval (1000) 
.do( => console.log('observable created')) 
. subscribe (value => this.clock- value); 


} 


ngOnDestroy () { 

if(this.subscription !-- undefined) 
this.subscription.unsubscribe (); 
} 

} 


现在 再 来 观察 ， 同 样 进入 并 离开 再 进入 页 面 后 ， 页 面 每 增加 1，console 也 会 增加 1， 运 行 结 果 如 图 8.39 所 示 。 


n T (X É] Elements Conso Sources Network Timeline Profies » 
wesome Todos OFW v (^ ba 


Angular 2 is running in the development mode. Call 
enableProdMode() to enable the production mode. 


O observable created playground, component, t$; 18 


Angular 2 is running in the development mode. Call lang,. 15:88 
enableProdMode() to enable the production mode. 


ED observable created plavareund. component. t$: 18 


» 


图 8.39 ”通过 onDestory 中 unsubsctibe 来 防止 内 存 泄露 


84 ”小 练习 


学 习 完 本 章 ， 你 应 该 可 以 处 理 较 复 杂 的 逻辑 了 。 熟 悉 Rx 的 方式 就 是 不 断 练习 ， 尤 其 是 在 什么 情况 下 采用 什么 操作 符 ， 以 及 如 何 将 一 系列 操作 串 起 来 。 
1. 我 们 目前 的 Todoservice 中 ， 得 到 Userld 和 其 他 逻辑 是 分 开 的 ， 仔 细 想 想 它 们 有 没有 逻辑 关系 ”是 否 依赖 ”如 果 有 依赖 的 话 ， 该 怎么 做 来 保证 这 种 依赖 关系 ” 试 着 用 Rx 解 决 这 个 问题 。 


2. 给 新 增 Todo 的 输入 框 添加 一 个 可 以 提供 输入 智能 提示 的 功能 ， 比 如 输入 have， 会 自动 提示 breakfast，a cup of coffee 等 等 。 我 们 点 击 后 会 自动 补 全 。 


第 9 章 ”用 Redux 管 理 Angular 应 用 


标题 写 错 了 吧 ， 是 Reactm 吧 ?” 没 错 ， 你 没 看 错 ， 就 是 Angular。 如 果 说 RxjJs 是 Angular 开 发 中 的 倚天 剑 ， 那 么 Redux 就 是 层 龙 刀 了 。 而且 这 两 种 神 兵 利 器 都 是 不 依赖 于 平台 的 ， 左 手 倚天 右手 层 龙 .…. 算 
了 ， 先 不 YY 了 ， 回 到 正题 。 


Redux 目 前 越 来 越 火 ， 已 经 成 了 React 开 发 中 的 事实 标准 。 火 到 什么 程度 ，GitHub 上 超过 26000 星 。 那 么 什么 到 底 Redux 做 了 什么 ? 这 件 事 又 和 Angular 有 几 毛 钱 关 系 ? 别 着 急 ， 我 们 下 面 就 来 讲 一 下 。 


9.2 为 什么 要 在 Angular 中 使 用 


首先 ， 正 如 C# 当 初 在 主流 强 类 型 语言 中 率先 引入 Lamda 之 后 ， 现 在 Java8 也 引入 了 这 个 特性 一 样 ， 所 有 好 的 模式 、 好 的 特性 最 终 会 在 各 个 平台 框架 上 有 体现 。Redux 本 身 在 React 社 区 中 的 大 量 使 用 本 身 
已 经 证 明 这 种 状态 管理 机 制 是 非常 健壮 的 。 


其 次 我 们 可 以 来 看 一 下 在 Angular 中 现 有 的 状态 管理 机 制 是 什么 样子 的 。 目 前 的 管理 机 制 就 是 ….. 嗯 .….. 没 有 统一 的 状态 管理 机 制 ( 见 图 9.2) 。 


图 9.2 ”遍地 开花 的 Angular 状 态 管理 


这 种 没有 统一 管理 机 制 的 情况 在 一 个 大 团队 是 很 恐怖 的 事情 ， 状 态 管理 的 代码 质量 完全 看 个 人 水 平 ， 这 样 会 导致 功能 越 来 越 多 的 应 用 中 的 状态 几乎 是 无 法 测试 的 。 


还 是 用 代码 来 说 话 吧 ， 下 面 我 们 看 看 一 个 不 用 Redux 管 理 的 Angular 应 用 是 怎样 的 。 我 们 就 拿 最 常见 的 Todo 应 用 来 解析 ( 题 外 话 : 这 个 应 用 已 经 变 成 Web 框 架 的 标准 对 标 项 目 了 ， 就 像 上 个 10 年 的 
PetStore 是 第 一 代 Web 框 架 的 对 标 项 目 一 样 。) 


第 一 种 状态 管理 方法 : 我 们 在 组 件 中 管理 。 在 组 件 中 可 以 声明 一 个 数组 ， 这 个 数组 作为 Todo 的 内 存 存储 。 每 次 操作 ， 比 如 新 增 (addTodo) 或 切换 状态 (toggleTodo) ， 首 先 调 用 服务 中 的 方法 ， 然 
后 手动 操作 数组 来 更 新 状态 : 


export class TodoComponent implements OnInit { 
desc: string = ''; 


todos : Todo[] = L1 ;// 在 组 件 中 建立 一 个 内 存 TodoList 数 组 


constructor ( 

QInject('todoService') private service, 
private route: ActivatedRoute, 

private router: Router) {} 


ngOnInit() ( 

this.route.params.forEach((params: Params) => ( 
let filter = params['filter']; 
this.filterTodos (filter); 
); 
} 


addTodo () { 
this.service 
.addTodo (this.desc) // 通 过 服务 新 增 数 据 到 服务 器 数据 库 
.then(todo => {// 更 新 todos 的 状态 
this.todos.push (todo) ;// 使 用 了 可 改变 的 数组 操作 方式 
E 


} 


toggleTodo (todo: Todo) { 
const i = this.todos.indexOf (todo); 
this.service 
. toggleTodo (todo) // 通 过 服务 更 新 数据 到 服务 器 数据 库 
.then(t => {// 更 新 todos 的 状态 
const i = todos.indexOf (todo); 
todos[i].completed = todo.completed; // 使 用 了 可 改变 的 数组 操作 方式 
); 


) 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 


第 二 种 状态 管理 方式 : 我 们 在 服务 中 做 类 似 的 事情 。 在 服务 中 定义 一 个 内 存 存储 (dataStore) ， 然 后 同样 是 在 更 新 服务 器 数据 后 手动 更 新 内 存 存 储 。 这 里 我 们 使 用 了 RxJS， 但 大 体 逻 辑 是 差不多 的 。 
当然 使 用 Rx 的 好 处 比较 明显 ， 组 件 只 需 访问 todos 属 性 方法 即 可 ， 组 件 内 的 逻辑 会 比较 简单 : 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
export class TodoService { 


private api url = 'http://localhost:3000/todos'; 

private headers = new Headers(('Content-Type': 'application/json']); 
private userId: string; 

private todos: BehaviorSubject«Todo[]»; 


private dataStore: (  // 我 们 自己 实现 的 内 存 数据 存储 
todos: Todo[] 


}; 


constructor (private http: Http, QGInject('auth') private authService) { 
this.authService.getAuth() 
.filter(auth -» auth.user !- null) 


. subscribe (auth => this.userId = auth.user.id); 
this.dataStore = ( todos: [] }; 
this. todos = new BehaviorSubject«Todo[]»([]1); 
} 


get todos (){ 
return this. todos.asObservable(); 


} 


// POST /todos 
addTodo (desc: string)(í 
let todoToAdd = { 

id: UUID.UUID(), 
desc: desc, 
completed: false, 
userId: this.userId 


this.http 
.post(this.api url, JSON.stringify(todoToAdd), (headers: this.headers]) 
.map(res => res.json() as Todo) // 通 过 服务 新 增 数据 到 服务 器 数据 库 
.subscribe (todo => ( 
// 更 新 内 存 存储 toqos 的 状态 
// 使 用 了 不 可 改变 的 数组 操作 方式 
this.dataStore.todos = [http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...this.dataStore.todos, todo]; 
// 推 送 给 订阅 者 新 的 内 存 存储 数据 
this. todos.next(Object.assign([], this.qataStore) .todos); 


PS 


]):; 
} 


toggleTodo (todo: Todo) { 
const url = '${this.api url)/$[todo.id)'; 
const i = this.dataStore.todos.indexOf (todo); 
let updatedTodo = Object.assign((]), todo, ícompleted: !todo.completed]); 


this.http 
.patch(url, JSON. pai EE !todo.completed)]), (headers: this.headers})// 通 过 服务 更 新 数据 到 服务 器 数据 库 
.Subscribe( => 


// 更 新 TI 的 状态 


this.dataStore.todos = [ 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/0EBPS/Text/...this.dataStore.todos.slice(0,i), 
updatedTodo, 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16136/OEBPS/Text/...this.dataStore.todos.slice (i+1) 


1;// 信 所 了 不 可 改变 的 数组 操作 方式 
/ /推送 给 订阅 者 新 的 内 存 存储 数据 
this. todos.next (Object.assign ({}， this.qataStore) .todos); 


]):; 
} 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/16136/0EBPS/Text/... 
} 


当然 还 有 很 多 方式 ， 比 如 服务 中 维护 一 部 分 ， 组 件 中 维护 一 部 分 ;再 比如 使 用 localstorage 做 存储 ， 每 次 读 来 写 去 ， 等 等 。 


不 是 说 这 些 方式 不 好 (如 果 可 以 保持 项 目 组 内 的 规范 统一 ， 项 目 较 小 的 情况 下 也 还 可 以 ) ， 而 是 说 代码 编写 的 方式 太 多 了 ， 而 且 状态 分 散在 各 个 组 件 和 服务 中 ， 没 有 统一 管理 。 一 个 小 项 目 可 能 还 没有 
问题 ， 但 大 项 目 就 会 发 现 内 存 状态 很 难 统一 维护 。 


更 不 用 说 在 Angular 2 中 我 们 写 了 很 多 组 件 里 的 EventEmitter， 只 是 为 了 把 某 个 事件 弹射 到 父 组 件 中 而 已 。 而 这 些 在 Redux 的 模式 下 ， 都 可 以 很 方便 地 解决 ， 我 们 同样 可 以 很 自由 地 在 服务 或 组 件 中 引用 
store。 但 不 管 怎样 编写 ， 我 们 遵守 的 是 同样 的 规则 ， 维 护 的 是 应 用 唯一 的 状态 树 。 


Angular 1.x 永 久 的 改变 了 JQuery 类 型 的 Web 开 发 ， 使 得 我 们 可 以 像 写 手 机 客户 端 App 一 样 来 写 前 端 代 码 。Redux 也 一 样 改变 了 状态 管理 的 写法 ，Redux 其 实 不 仅仅 是 一 个 类 库 ， 更 是 一 种 设计 模式 。 而 
且 在 Angular 2 中 由 于 有 RxJS， 你 会 发 现 我 们 甚至 比 在 React 中 使 用 时 更 方便 ， 更 强大 。 


9.3 如何 使 用 Redux 


ngrx 是 一 套利 用 RxJS 的 类 库 ， 其 中 的 @ngrx/store (https://github.com/ngrx/store) 就 是 基于 Redux 规 范 制定 的 Angular 2 框架 如 图 9.3 所 示 。 接 下 来 我 们 一 起 看 看 如 何 使 用 这 套 框架 改造 Todo 应 
用 。 


Awesome Todos 
What do you want 


have lunch 


take a break 


having fun 


items lefi Active — Completed Clear completed 


图 9.3 Jf Redux e 3€ 34 45 83 Todo 


9.4 ”小 练习 


这 一 章 的 小 练习 不 算 小 ， 因 为 我 们 已 经 掌握 了 这 么 多 强大 功能 ， 不 用 一 下 ， 心 也 是 痒痒 的 。 
1. 给 每 个 人 做 一 个 “个 人 中 心 ” 页 面 吧 ， 点 击 右上 角 的 用 户 名 即 可 进入 。 用 户 可 以 编辑 自己 的 个 人 信息 ， 包 括 上 昵称、 姓名、 性别 、 头 像 、 电 话 等 。 当 然 要 做 这 个 可 能 也 要 改动 注册 页 面 。 
2. 把 轮换 登录 页 图 片 的 功能 再 完善 一 下 ， 把 取 到 的 图 片 存在 本 地 存储 中 ， 然 后 用 动画 Flyln 或 其 他 动画 形式 来 做 切换 的 过 渡 效 果 。 


3. 我 们 现在 的 状态 都 是 在 内 存 中 的 ， 也 就 是 我 们 关闭 网 页 后 ， 这 个 状态 就 没有 了。 可 否 让 状态 每 次 都 可 以 保存 在 本 地 存储 ， 下 次 进入 时 可 以 继续 上 次 离开 时 的 状态 ? 


9.5 ”小结 


我 们 再 来 回顾 和 总 结 一 下 这 章 学 习 的 Redux: 
: Redux 的 主要 特点 是 状态 中 心 化 管理 ， 使 得 Service 和 组 件 更 多 地 做 自己 应 该 做 的 事情 。 
- (@ngrx/store 是 通过 Observable 实 现 的 Redux， 这 可 以 让 我 们 利用 Angular 2 的 RxJS 支 持 ， 包 括 模 板 的 Async 管 道 更 简单 地 使 用 Redux。 
避免 使 用 可 变 对 象 才 能 确保 状态 的 可 维护 性 。 
: Reducet 是 纯 函 数 ， 不 要 做 超出 返回 新 状态 之 外 的 事情 。 
. 一 个 Store 基 本 上 是 一 个 key-value 对 的 集合 ， 再 加 上 一 些 机 制 去 处 理事 件 。 
- 订阅 数据 使 用 store.select。 


我 们 的 Angular 学 习 之 旅 从 零 开 始 到 现在 ， 完 整地 搭建 了 一 个 小 应 用 。 相 信 大 家 现在 应 该 对 Angular 2 有 一 个 大 概 的 认识 了 ， 而 且 也 可 以 参与 到 正式 的 开发 项 目 中 去 了 。 但 Angular 2 作为 一 个 完整 框 
架 ， 有 很 多 细节 我 们 是 没有 提 到 的 ， 大 家 可 以 到 官方 文档 https://angular.cn/ 去 查找 和 学 习 。 


本 章 代 码 : https://github.com/wpcfan/awesome-tutorials/tree/chapter09 


打开 命令 行 工 具 使 用 git clone https://github.com/wpcfan/awesome-tutotials 载 。 然 后 键入 git checkout chapter09 切 换 到 本 章 代 码 。 


